#5E7FA2 - #D1DAE4 | colorate

colorate is a color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. Make this site better

Blend #5E7FA2 to #D1DAE4

#5E7FA2 #D1DAE4

Calculate the color between two colors, #5E7FA2 and #D1DAE4. In calculation of RGB values, saturation between the dissimilar colors is low. In calculating of HSV values, saturation between the dissimilar colors is not low.

RGB Blend(Linear)

#5E7FA2 - #D1DAE4 | colorate

Calculation of color between two colors based on RGB value. For colors that are distant from each other, the saturation between the two colors decreases. Expand the color between two colors with #5E7FA2 as 0% and #D1DAE4 as 100%.

0.0%	0.0% #5E7FA2	RGB 94 127 162	#5E7FA2
16.7%	16.7% #718EAD	RGB 113 142 173	#718EAD
33.3%	33.3% #849DB8	RGB 132 157 184	#849DB8
50.0%	50.0% #97ACC3	RGB 151 172 195	#97ACC3
66.7%	66.7% #AABBCE	RGB 170 187 206	#AABBCE
83.3%	83.3% #BDCAD9	RGB 189 202 217	#BDCAD9
100.0%	100.0% #D1DAE4	RGB 209 218 228	#D1DAE4

#5E7FA2 #718EAD #849DB8 #97ACC3 #AABBCE #BDCAD9 #D1DAE4

#5E7FA2 - #D1DAE4

HSV Blend

#5E7FA2 - #D1DAE4 | colorate

Calculation of color between two colors based on HSV value. Even between distinct colors of color, the saturation between the two colors does not decrease. Expand the color between two colors with #5E7FA2 as 0% and #D1DAE4 as 100%.

0.0%	0.0% #5E7FA2	RGB 94 127 162	#5E7FA2
16.7%	16.7% #6E8CAD	RGB 110 140 173	#6E8CAD
33.3%	33.3% #7F9AB8	RGB 127 154 184	#7F9AB8
50.0%	50.0% #91A9C3	RGB 145 169 195	#91A9C3
66.7%	66.7% #A5B8CE	RGB 165 184 206	#A5B8CE
83.3%	83.3% #BAC9D9	RGB 186 201 217	#BAC9D9
100.0%	100.0% #D1DAE4	RGB 209 218 228	#D1DAE4

#5E7FA2 #6E8CAD #7F9AB8 #91A9C3 #A5B8CE #BAC9D9 #D1DAE4

#5E7FA2 - #91A9C3 - #D1DAE4

CSS codes

<style type="text/css">
/* RGB Gradient */
div {
    background: -moz-linear-gradient(top, #5E7FA2 0%, #D1DAE4 100%);
    background: -webkit-linear-gradient(top, #5E7FA2 0%, #D1DAE4 100%);
    background: linear-gradient(to bottom, #5E7FA2 0%, #D1DAE4 100%);
}

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5E7FA2 0%, #91A9C3 50%, #D1DAE4 100%);
    background: -webkit-linear-gradient(top, #5E7FA2 0%, #91A9C3 50%, #D1DAE4 100%);
    background: linear-gradient(to bottom, #5E7FA2 0%, #91A9C3 50%, #D1DAE4 100%);
}
</style>