#5E8DC2 - #D1DEED | 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 #5E8DC2 to #D1DEED

#5E8DC2 #D1DEED

Calculate the color between two colors, #5E8DC2 and #D1DEED. 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)

#5E8DC2 - #D1DEED | 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 #5E8DC2 as 0% and #D1DEED as 100%.

0.0%	0.0% #5E8DC2	RGB 94 141 194	#5E8DC2
16.7%	16.7% #719AC9	RGB 113 154 201	#719AC9
33.3%	33.3% #84A8D0	RGB 132 168 208	#84A8D0
50.0%	50.0% #97B5D7	RGB 151 181 215	#97B5D7
66.7%	66.7% #AAC3DE	RGB 170 195 222	#AAC3DE
83.3%	83.3% #BDD0E5	RGB 189 208 229	#BDD0E5
100.0%	100.0% #D1DEED	RGB 209 222 237	#D1DEED

#5E8DC2 #719AC9 #84A8D0 #97B5D7 #AAC3DE #BDD0E5 #D1DEED

#5E8DC2 - #D1DEED

HSV Blend

#5E8DC2 - #D1DEED | 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 #5E8DC2 as 0% and #D1DEED as 100%.

0.0%	0.0% #5E8CC2	RGB 94 140 194	#5E8CC2
16.7%	16.7% #6E99C9	RGB 110 153 201	#6E99C9
33.3%	33.3% #80A5D0	RGB 128 165 208	#80A5D0
50.0%	50.0% #93B3D7	RGB 147 179 215	#93B3D7
66.7%	66.7% #A6C0DE	RGB 166 192 222	#A6C0DE
83.3%	83.3% #BBCFE5	RGB 187 207 229	#BBCFE5
100.0%	100.0% #D1DEED	RGB 209 222 237	#D1DEED

#5E8CC2 #6E99C9 #80A5D0 #93B3D7 #A6C0DE #BBCFE5 #D1DEED

#5E8DC2 - #93B3D7 - #D1DEED

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5E8CC2 0%, #93B3D7 50%, #D1DEED 100%);
    background: -webkit-linear-gradient(top, #5E8CC2 0%, #93B3D7 50%, #D1DEED 100%);
    background: linear-gradient(to bottom, #5E8CC2 0%, #93B3D7 50%, #D1DEED 100%);
}
</style>