#CCD5E2 - #F0F3F6 | 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 #CCD5E2 to #F0F3F6

#CCD5E2 #F0F3F6

Calculate the color between two colors, #CCD5E2 and #F0F3F6. 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)

#CCD5E2 - #F0F3F6 | 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 #CCD5E2 as 0% and #F0F3F6 as 100%.

0.0%	0.0% #CCD5E2	RGB 204 213 226	#CCD5E2
16.7%	16.7% #D2DAE5	RGB 210 218 229	#D2DAE5
33.3%	33.3% #D8DFE8	RGB 216 223 232	#D8DFE8
50.0%	50.0% #DEE4EC	RGB 222 228 236	#DEE4EC
66.7%	66.7% #E4E9EF	RGB 228 233 239	#E4E9EF
83.3%	83.3% #EAEEF2	RGB 234 238 242	#EAEEF2
100.0%	100.0% #F0F3F6	RGB 240 243 246	#F0F3F6

#CCD5E2 #D2DAE5 #D8DFE8 #DEE4EC #E4E9EF #EAEEF2 #F0F3F6

#CCD5E2 - #F0F3F6

HSV Blend

#CCD5E2 - #F0F3F6 | 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 #CCD5E2 as 0% and #F0F3F6 as 100%.

0.0%	0.0% #CCD5E2	RGB 204 213 226	#CCD5E2
16.7%	16.7% #D1DAE5	RGB 209 218 229	#D1DAE5
33.3%	33.3% #D7DFE8	RGB 215 223 232	#D7DFE8
50.0%	50.0% #DDE4EC	RGB 221 228 236	#DDE4EC
66.7%	66.7% #E3E9EF	RGB 227 233 239	#E3E9EF
83.3%	83.3% #E9EEF2	RGB 233 238 242	#E9EEF2
100.0%	100.0% #F0F3F6	RGB 240 243 246	#F0F3F6

#CCD5E2 #D1DAE5 #D7DFE8 #DDE4EC #E3E9EF #E9EEF2 #F0F3F6

#CCD5E2 - #DDE4EC - #F0F3F6

CSS codes

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

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