#3C8CAC - #BBD1C8 | 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 #3C8CAC to #BBD1C8

#3C8CAC #BBD1C8

Calculate the color between two colors, #3C8CAC and #BBD1C8. 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)

#3C8CAC - #BBD1C8 | 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 #3C8CAC as 0% and #BBD1C8 as 100%.

0.0%	0.0% #3C8CAC	RGB 60 140 172	#3C8CAC
16.7%	16.7% #5197B0	RGB 81 151 176	#5197B0
33.3%	33.3% #66A3B5	RGB 102 163 181	#66A3B5
50.0%	50.0% #7BAEBA	RGB 123 174 186	#7BAEBA
66.7%	66.7% #90BABE	RGB 144 186 190	#90BABE
83.3%	83.3% #A5C5C3	RGB 165 197 195	#A5C5C3
100.0%	100.0% #BBD1C8	RGB 187 209 200	#BBD1C8

#3C8CAC #5197B0 #66A3B5 #7BAEBA #90BABE #A5C5C3 #BBD1C8

#3C8CAC - #BBD1C8

HSV Blend

#3C8CAC - #BBD1C8 | 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 #3C8CAC as 0% and #BBD1C8 as 100%.

0.0%	0.0% #3C8CAC	RGB 60 140 172	#3C8CAC
16.7%	16.7% #4EA1B2	RGB 78 161 178	#4EA1B2
33.3%	33.3% #61B3B8	RGB 97 179 184	#61B3B8
50.0%	50.0% #76BEBA	RGB 118 190 186	#76BEBA
66.7%	66.7% #8CC4BA	RGB 140 196 186	#8CC4BA
83.3%	83.3% #A3CABF	RGB 163 202 191	#A3CABF
100.0%	100.0% #BBD1C8	RGB 187 209 200	#BBD1C8

#3C8CAC #4EA1B2 #61B3B8 #76BEBA #8CC4BA #A3CABF #BBD1C8

#3C8CAC - #76BEBA - #BBD1C8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C8CAC 0%, #76BEBA 50%, #BBD1C8 100%);
    background: -webkit-linear-gradient(top, #3C8CAC 0%, #76BEBA 50%, #BBD1C8 100%);
    background: linear-gradient(to bottom, #3C8CAC 0%, #76BEBA 50%, #BBD1C8 100%);
}
</style>