#B5CCE2 - #506DB3 | 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 #B5CCE2 to #506DB3

#B5CCE2 #506DB3

Calculate the color between two colors, #B5CCE2 and #506DB3. 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)

#B5CCE2 - #506DB3 | 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 #B5CCE2 as 0% and #506DB3 as 100%.

0.0%	0.0% #B5CCE2	RGB 181 204 226	#B5CCE2
16.7%	16.7% #A4BCDA	RGB 164 188 218	#A4BCDA
33.3%	33.3% #93ACD2	RGB 147 172 210	#93ACD2
50.0%	50.0% #829CCA	RGB 130 156 202	#829CCA
66.7%	66.7% #718CC2	RGB 113 140 194	#718CC2
83.3%	83.3% #607CBA	RGB 96 124 186	#607CBA
100.0%	100.0% #506DB3	RGB 80 109 179	#506DB3

#B5CCE2 #A4BCDA #93ACD2 #829CCA #718CC2 #607CBA #506DB3

#B5CCE2 - #506DB3

HSV Blend

#B5CCE2 - #506DB3 | 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 #B5CCE2 as 0% and #506DB3 as 100%.

0.0%	0.0% #B5CCE2	RGB 181 204 226	#B5CCE2
16.7%	16.7% #A1BCDA	RGB 161 188 218	#A1BCDA
33.3%	33.3% #8FACD2	RGB 143 172 210	#8FACD2
50.0%	50.0% #7E9CCA	RGB 126 156 202	#7E9CCA
66.7%	66.7% #6D8CC2	RGB 109 140 194	#6D8CC2
83.3%	83.3% #5E7CBA	RGB 94 124 186	#5E7CBA
100.0%	100.0% #506DB3	RGB 80 109 179	#506DB3

#B5CCE2 #A1BCDA #8FACD2 #7E9CCA #6D8CC2 #5E7CBA #506DB3

#B5CCE2 - #7E9CCA - #506DB3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B5CCE2 0%, #7E9CCA 50%, #506DB3 100%);
    background: -webkit-linear-gradient(top, #B5CCE2 0%, #7E9CCA 50%, #506DB3 100%);
    background: linear-gradient(to bottom, #B5CCE2 0%, #7E9CCA 50%, #506DB3 100%);
}
</style>