#ECF2F9 - #9CB3C8 | 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 #ECF2F9 to #9CB3C8

#ECF2F9 #9CB3C8

Calculate the color between two colors, #ECF2F9 and #9CB3C8. 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)

#ECF2F9 - #9CB3C8 | 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 #ECF2F9 as 0% and #9CB3C8 as 100%.

0.0%	0.0% #ECF2F9	RGB 236 242 249	#ECF2F9
16.7%	16.7% #DEE7F0	RGB 222 231 240	#DEE7F0
33.3%	33.3% #D1DDE8	RGB 209 221 232	#D1DDE8
50.0%	50.0% #C4D2E0	RGB 196 210 224	#C4D2E0
66.7%	66.7% #B6C8D8	RGB 182 200 216	#B6C8D8
83.3%	83.3% #A9BDD0	RGB 169 189 208	#A9BDD0
100.0%	100.0% #9CB3C8	RGB 156 179 200	#9CB3C8

#ECF2F9 #DEE7F0 #D1DDE8 #C4D2E0 #B6C8D8 #A9BDD0 #9CB3C8

#ECF2F9 - #9CB3C8

HSV Blend

#ECF2F9 - #9CB3C8 | 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 #ECF2F9 as 0% and #9CB3C8 as 100%.

0.0%	0.0% #ECF2F9	RGB 236 242 249	#ECF2F9
16.7%	16.7% #DDE6F0	RGB 221 230 240	#DDE6F0
33.3%	33.3% #CFDBE8	RGB 207 219 232	#CFDBE8
50.0%	50.0% #C1D0E0	RGB 193 208 224	#C1D0E0
66.7%	66.7% #B4C6D8	RGB 180 198 216	#B4C6D8
83.3%	83.3% #A8BCD0	RGB 168 188 208	#A8BCD0
100.0%	100.0% #9CB3C8	RGB 156 179 200	#9CB3C8

#ECF2F9 #DDE6F0 #CFDBE8 #C1D0E0 #B4C6D8 #A8BCD0 #9CB3C8

#ECF2F9 - #C1D0E0 - #9CB3C8

CSS codes

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

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