#BEC0D9 - #ECECF4 | 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 #BEC0D9 to #ECECF4

#BEC0D9 #ECECF4

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

#BEC0D9 - #ECECF4 | 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 #BEC0D9 as 0% and #ECECF4 as 100%.

0.0%	0.0% #BEC0D9	RGB 190 192 217	#BEC0D9
16.7%	16.7% #C5C7DD	RGB 197 199 221	#C5C7DD
33.3%	33.3% #CDCEE2	RGB 205 206 226	#CDCEE2
50.0%	50.0% #D5D6E6	RGB 213 214 230	#D5D6E6
66.7%	66.7% #DCDDEB	RGB 220 221 235	#DCDDEB
83.3%	83.3% #E4E4EF	RGB 228 228 239	#E4E4EF
100.0%	100.0% #ECECF4	RGB 236 236 244	#ECECF4

#BEC0D9 #C5C7DD #CDCEE2 #D5D6E6 #DCDDEB #E4E4EF #ECECF4

#BEC0D9 - #ECECF4

HSV Blend

#BEC0D9 - #ECECF4 | 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 #BEC0D9 as 0% and #ECECF4 as 100%.

0.0%	0.0% #BEC0D9	RGB 190 192 217	#BEC0D9
16.7%	16.7% #C5C6DD	RGB 197 198 221	#C5C6DD
33.3%	33.3% #CCCDE2	RGB 204 205 226	#CCCDE2
50.0%	50.0% #D4D5E6	RGB 212 213 230	#D4D5E6
66.7%	66.7% #DCDCEB	RGB 220 220 235	#DCDCEB
83.3%	83.3% #E3E4EF	RGB 227 228 239	#E3E4EF
100.0%	100.0% #ECECF4	RGB 236 236 244	#ECECF4

#BEC0D9 #C5C6DD #CCCDE2 #D4D5E6 #DCDCEB #E3E4EF #ECECF4

#BEC0D9 - #D4D5E6 - #ECECF4

CSS codes

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

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