#B5BADC - #556BA0 | 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 #B5BADC to #556BA0

#B5BADC #556BA0

Calculate the color between two colors, #B5BADC and #556BA0. 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)

#B5BADC - #556BA0 | 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 #B5BADC as 0% and #556BA0 as 100%.

0.0%	0.0% #B5BADC	RGB 181 186 220	#B5BADC
16.7%	16.7% #A5ACD2	RGB 165 172 210	#A5ACD2
33.3%	33.3% #959FC8	RGB 149 159 200	#959FC8
50.0%	50.0% #8592BE	RGB 133 146 190	#8592BE
66.7%	66.7% #7585B4	RGB 117 133 180	#7585B4
83.3%	83.3% #6578AA	RGB 101 120 170	#6578AA
100.0%	100.0% #556BA0	RGB 85 107 160	#556BA0

#B5BADC #A5ACD2 #959FC8 #8592BE #7585B4 #6578AA #556BA0

#B5BADC - #556BA0

HSV Blend

#B5BADC - #556BA0 | 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 #B5BADC as 0% and #556BA0 as 100%.

0.0%	0.0% #B5BADC	RGB 181 186 220	#B5BADC
16.7%	16.7% #A2A9D2	RGB 162 169 210	#A2A9D2
33.3%	33.3% #919BC8	RGB 145 155 200	#919BC8
50.0%	50.0% #808DBE	RGB 128 141 190	#808DBE
66.7%	66.7% #7181B4	RGB 113 129 180	#7181B4
83.3%	83.3% #6275AA	RGB 98 117 170	#6275AA
100.0%	100.0% #556BA0	RGB 85 107 160	#556BA0

#B5BADC #A2A9D2 #919BC8 #808DBE #7181B4 #6275AA #556BA0

#B5BADC - #808DBE - #556BA0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B5BADC 0%, #808DBE 50%, #556BA0 100%);
    background: -webkit-linear-gradient(top, #B5BADC 0%, #808DBE 50%, #556BA0 100%);
    background: linear-gradient(to bottom, #B5BADC 0%, #808DBE 50%, #556BA0 100%);
}
</style>