#BABBC3 - #5C7180 | 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 #BABBC3 to #5C7180

#BABBC3 #5C7180

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

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

0.0%	0.0% #BABBC3	RGB 186 187 195	#BABBC3
16.7%	16.7% #AAAEB7	RGB 170 174 183	#AAAEB7
33.3%	33.3% #9AA2AC	RGB 154 162 172	#9AA2AC
50.0%	50.0% #8B96A1	RGB 139 150 161	#8B96A1
66.7%	66.7% #7B8996	RGB 123 137 150	#7B8996
83.3%	83.3% #6B7D8B	RGB 107 125 139	#6B7D8B
100.0%	100.0% #5C7180	RGB 92 113 128	#5C7180

#BABBC3 #AAAEB7 #9AA2AC #8B96A1 #7B8996 #6B7D8B #5C7180

#BABBC3 - #5C7180

HSV Blend

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

0.0%	0.0% #BABBC3	RGB 186 187 195	#BABBC3
16.7%	16.7% #A8ABB7	RGB 168 171 183	#A8ABB7
33.3%	33.3% #979CAC	RGB 151 156 172	#979CAC
50.0%	50.0% #8790A1	RGB 135 144 161	#8790A1
66.7%	66.7% #778496	RGB 119 132 150	#778496
83.3%	83.3% #697A8B	RGB 105 122 139	#697A8B
100.0%	100.0% #5C7180	RGB 92 113 128	#5C7180

#BABBC3 #A8ABB7 #979CAC #8790A1 #778496 #697A8B #5C7180

#BABBC3 - #8790A1 - #5C7180

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BABBC3 0%, #8790A1 50%, #5C7180 100%);
    background: -webkit-linear-gradient(top, #BABBC3 0%, #8790A1 50%, #5C7180 100%);
    background: linear-gradient(to bottom, #BABBC3 0%, #8790A1 50%, #5C7180 100%);
}
</style>