#BBC2D3 - #676C96 | 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 #BBC2D3 to #676C96

#BBC2D3 #676C96

Calculate the color between two colors, #BBC2D3 and #676C96. 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)

#BBC2D3 - #676C96 | 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 #BBC2D3 as 0% and #676C96 as 100%.

0.0%	0.0% #BBC2D3	RGB 187 194 211	#BBC2D3
16.7%	16.7% #ADB3C8	RGB 173 179 200	#ADB3C8
33.3%	33.3% #9FA5BE	RGB 159 165 190	#9FA5BE
50.0%	50.0% #9197B4	RGB 145 151 180	#9197B4
66.7%	66.7% #8388AA	RGB 131 136 170	#8388AA
83.3%	83.3% #757AA0	RGB 117 122 160	#757AA0
100.0%	100.0% #676C96	RGB 103 108 150	#676C96

#BBC2D3 #ADB3C8 #9FA5BE #9197B4 #8388AA #757AA0 #676C96

#BBC2D3 - #676C96

HSV Blend

#BBC2D3 - #676C96 | 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 #BBC2D3 as 0% and #676C96 as 100%.

0.0%	0.0% #BBC2D3	RGB 187 194 211	#BBC2D3
16.7%	16.7% #ABB3C8	RGB 171 179 200	#ABB3C8
33.3%	33.3% #9CA4BE	RGB 156 164 190	#9CA4BE
50.0%	50.0% #8D95B4	RGB 141 149 180	#8D95B4
66.7%	66.7% #8087AA	RGB 128 135 170	#8087AA
83.3%	83.3% #7379A0	RGB 115 121 160	#7379A0
100.0%	100.0% #676C96	RGB 103 108 150	#676C96

#BBC2D3 #ABB3C8 #9CA4BE #8D95B4 #8087AA #7379A0 #676C96

#BBC2D3 - #8D95B4 - #676C96

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BBC2D3 0%, #8D95B4 50%, #676C96 100%);
    background: -webkit-linear-gradient(top, #BBC2D3 0%, #8D95B4 50%, #676C96 100%);
    background: linear-gradient(to bottom, #BBC2D3 0%, #8D95B4 50%, #676C96 100%);
}
</style>