#BEC5E9 - #5D76B3 | 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 #BEC5E9 to #5D76B3

#BEC5E9 #5D76B3

Calculate the color between two colors, #BEC5E9 and #5D76B3. 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)

#BEC5E9 - #5D76B3 | 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 #BEC5E9 as 0% and #5D76B3 as 100%.

0.0%	0.0% #BEC5E9	RGB 190 197 233	#BEC5E9
16.7%	16.7% #ADB7E0	RGB 173 183 224	#ADB7E0
33.3%	33.3% #9DAAD7	RGB 157 170 215	#9DAAD7
50.0%	50.0% #8D9DCE	RGB 141 157 206	#8D9DCE
66.7%	66.7% #7D90C5	RGB 125 144 197	#7D90C5
83.3%	83.3% #6D83BC	RGB 109 131 188	#6D83BC
100.0%	100.0% #5D76B3	RGB 93 118 179	#5D76B3

#BEC5E9 #ADB7E0 #9DAAD7 #8D9DCE #7D90C5 #6D83BC #5D76B3

#BEC5E9 - #5D76B3

HSV Blend

#BEC5E9 - #5D76B3 | 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 #BEC5E9 as 0% and #5D76B3 as 100%.

0.0%	0.0% #BEC5E9	RGB 190 197 233	#BEC5E9
16.7%	16.7% #ABB5E0	RGB 171 181 224	#ABB5E0
33.3%	33.3% #9AA6D7	RGB 154 166 215	#9AA6D7
50.0%	50.0% #8999CE	RGB 137 153 206	#8999CE
66.7%	66.7% #798CC5	RGB 121 140 197	#798CC5
83.3%	83.3% #6A80BC	RGB 106 128 188	#6A80BC
100.0%	100.0% #5D76B3	RGB 93 118 179	#5D76B3

#BEC5E9 #ABB5E0 #9AA6D7 #8999CE #798CC5 #6A80BC #5D76B3

#BEC5E9 - #8999CE - #5D76B3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BEC5E9 0%, #8999CE 50%, #5D76B3 100%);
    background: -webkit-linear-gradient(top, #BEC5E9 0%, #8999CE 50%, #5D76B3 100%);
    background: linear-gradient(to bottom, #BEC5E9 0%, #8999CE 50%, #5D76B3 100%);
}
</style>