#BBCBCB - #509596 | 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 #BBCBCB to #509596

#BBCBCB #509596

Calculate the color between two colors, #BBCBCB and #509596. 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)

#BBCBCB - #509596 | 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 #BBCBCB as 0% and #509596 as 100%.

0.0%	0.0% #BBCBCB	RGB 187 203 203	#BBCBCB
16.7%	16.7% #A9C2C2	RGB 169 194 194	#A9C2C2
33.3%	33.3% #97B9B9	RGB 151 185 185	#97B9B9
50.0%	50.0% #85B0B0	RGB 133 176 176	#85B0B0
66.7%	66.7% #73A7A7	RGB 115 167 167	#73A7A7
83.3%	83.3% #619E9E	RGB 97 158 158	#619E9E
100.0%	100.0% #509596	RGB 80 149 150	#509596

#BBCBCB #A9C2C2 #97B9B9 #85B0B0 #73A7A7 #619E9E #509596

#BBCBCB - #509596

HSV Blend

#BBCBCB - #509596 | 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 #BBCBCB as 0% and #509596 as 100%.

0.0%	0.0% #BBCBCB	RGB 187 203 203	#BBCBCB
16.7%	16.7% #A6C2C2	RGB 166 194 194	#A6C2C2
33.3%	33.3% #92B9B9	RGB 146 185 185	#92B9B9
50.0%	50.0% #80B0B0	RGB 128 176 176	#80B0B0
66.7%	66.7% #6FA7A7	RGB 111 167 167	#6FA7A7
83.3%	83.3% #5E9E9E	RGB 94 158 158	#5E9E9E
100.0%	100.0% #509596	RGB 80 149 150	#509596

#BBCBCB #A6C2C2 #92B9B9 #80B0B0 #6FA7A7 #5E9E9E #509596

#BBCBCB - #80B0B0 - #509596

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BBCBCB 0%, #80B0B0 50%, #509596 100%);
    background: -webkit-linear-gradient(top, #BBCBCB 0%, #80B0B0 50%, #509596 100%);
    background: linear-gradient(to bottom, #BBCBCB 0%, #80B0B0 50%, #509596 100%);
}
</style>