#B2BCCE - #5E779A | 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 #B2BCCE to #5E779A

#B2BCCE #5E779A

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

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

0.0%	0.0% #B2BCCE	RGB 178 188 206	#B2BCCE
16.7%	16.7% #A4B0C5	RGB 164 176 197	#A4B0C5
33.3%	33.3% #96A5BC	RGB 150 165 188	#96A5BC
50.0%	50.0% #8899B4	RGB 136 153 180	#8899B4
66.7%	66.7% #7A8EAB	RGB 122 142 171	#7A8EAB
83.3%	83.3% #6C82A2	RGB 108 130 162	#6C82A2
100.0%	100.0% #5E779A	RGB 94 119 154	#5E779A

#B2BCCE #A4B0C5 #96A5BC #8899B4 #7A8EAB #6C82A2 #5E779A

#B2BCCE - #5E779A

HSV Blend

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

0.0%	0.0% #B2BCCE	RGB 178 188 206	#B2BCCE
16.7%	16.7% #A2AFC5	RGB 162 175 197	#A2AFC5
33.3%	33.3% #93A2BC	RGB 147 162 188	#93A2BC
50.0%	50.0% #8497B4	RGB 132 151 180	#8497B4
66.7%	66.7% #778BAB	RGB 119 139 171	#778BAB
83.3%	83.3% #6A81A2	RGB 106 129 162	#6A81A2
100.0%	100.0% #5E779A	RGB 94 119 154	#5E779A

#B2BCCE #A2AFC5 #93A2BC #8497B4 #778BAB #6A81A2 #5E779A

#B2BCCE - #8497B4 - #5E779A

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B2BCCE 0%, #8497B4 50%, #5E779A 100%);
    background: -webkit-linear-gradient(top, #B2BCCE 0%, #8497B4 50%, #5E779A 100%);
    background: linear-gradient(to bottom, #B2BCCE 0%, #8497B4 50%, #5E779A 100%);
}
</style>