#BDCCCE - #ECF0F1 | 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 #BDCCCE to #ECF0F1

#BDCCCE #ECF0F1

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

#BDCCCE - #ECF0F1 | 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 #BDCCCE as 0% and #ECF0F1 as 100%.

0.0%	0.0% #BDCCCE	RGB 189 204 206	#BDCCCE
16.7%	16.7% #C4D2D3	RGB 196 210 211	#C4D2D3
33.3%	33.3% #CCD8D9	RGB 204 216 217	#CCD8D9
50.0%	50.0% #D4DEDF	RGB 212 222 223	#D4DEDF
66.7%	66.7% #DCE4E5	RGB 220 228 229	#DCE4E5
83.3%	83.3% #E4EAEB	RGB 228 234 235	#E4EAEB
100.0%	100.0% #ECF0F1	RGB 236 240 241	#ECF0F1

#BDCCCE #C4D2D3 #CCD8D9 #D4DEDF #DCE4E5 #E4EAEB #ECF0F1

#BDCCCE - #ECF0F1

HSV Blend

#BDCCCE - #ECF0F1 | 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 #BDCCCE as 0% and #ECF0F1 as 100%.

0.0%	0.0% #BDCCCE	RGB 189 204 206	#BDCCCE
16.7%	16.7% #C4D1D3	RGB 196 209 211	#C4D1D3
33.3%	33.3% #CCD7D9	RGB 204 215 217	#CCD7D9
50.0%	50.0% #D3DDDF	RGB 211 221 223	#D3DDDF
66.7%	66.7% #DBE3E5	RGB 219 227 229	#DBE3E5
83.3%	83.3% #E3E9EB	RGB 227 233 235	#E3E9EB
100.0%	100.0% #ECF0F1	RGB 236 240 241	#ECF0F1

#BDCCCE #C4D1D3 #CCD7D9 #D3DDDF #DBE3E5 #E3E9EB #ECF0F1

#BDCCCE - #D3DDDF - #ECF0F1

CSS codes

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

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