#DEF2FA - #8DB1CC | 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 #DEF2FA to #8DB1CC

#DEF2FA #8DB1CC

Calculate the color between two colors, #DEF2FA and #8DB1CC. 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)

#DEF2FA - #8DB1CC | 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 #DEF2FA as 0% and #8DB1CC as 100%.

0.0%	0.0% #DEF2FA	RGB 222 242 250	#DEF2FA
16.7%	16.7% #D0E7F2	RGB 208 231 242	#D0E7F2
33.3%	33.3% #C3DCEA	RGB 195 220 234	#C3DCEA
50.0%	50.0% #B5D1E3	RGB 181 209 227	#B5D1E3
66.7%	66.7% #A8C6DB	RGB 168 198 219	#A8C6DB
83.3%	83.3% #9ABBD3	RGB 154 187 211	#9ABBD3
100.0%	100.0% #8DB1CC	RGB 141 177 204	#8DB1CC

#DEF2FA #D0E7F2 #C3DCEA #B5D1E3 #A8C6DB #9ABBD3 #8DB1CC

#DEF2FA - #8DB1CC

HSV Blend

#DEF2FA - #8DB1CC | 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 #DEF2FA as 0% and #8DB1CC as 100%.

0.0%	0.0% #DEF2FA	RGB 222 242 250	#DEF2FA
16.7%	16.7% #CFE7F2	RGB 207 231 242	#CFE7F2
33.3%	33.3% #C0DCEA	RGB 192 220 234	#C0DCEA
50.0%	50.0% #B3D1E3	RGB 179 209 227	#B3D1E3
66.7%	66.7% #A5C7DB	RGB 165 199 219	#A5C7DB
83.3%	83.3% #99BCD3	RGB 153 188 211	#99BCD3
100.0%	100.0% #8DB1CC	RGB 141 177 204	#8DB1CC

#DEF2FA #CFE7F2 #C0DCEA #B3D1E3 #A5C7DB #99BCD3 #8DB1CC

#DEF2FA - #B3D1E3 - #8DB1CC

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #DEF2FA 0%, #B3D1E3 50%, #8DB1CC 100%);
    background: -webkit-linear-gradient(top, #DEF2FA 0%, #B3D1E3 50%, #8DB1CC 100%);
    background: linear-gradient(to bottom, #DEF2FA 0%, #B3D1E3 50%, #8DB1CC 100%);
}
</style>