#3C8CAA - #BCD1C7 | 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 #3C8CAA to #BCD1C7

#3C8CAA #BCD1C7

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

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

0.0%	0.0% #3C8CAA	RGB 60 140 170	#3C8CAA
16.7%	16.7% #5197AE	RGB 81 151 174	#5197AE
33.3%	33.3% #66A3B3	RGB 102 163 179	#66A3B3
50.0%	50.0% #7CAEB8	RGB 124 174 184	#7CAEB8
66.7%	66.7% #91BABD	RGB 145 186 189	#91BABD
83.3%	83.3% #A6C5C2	RGB 166 197 194	#A6C5C2
100.0%	100.0% #BCD1C7	RGB 188 209 199	#BCD1C7

#3C8CAA #5197AE #66A3B3 #7CAEB8 #91BABD #A6C5C2 #BCD1C7

#3C8CAA - #BCD1C7

HSV Blend

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

0.0%	0.0% #3C8BAA	RGB 60 139 170	#3C8BAA
16.7%	16.7% #4EA1B0	RGB 78 161 176	#4EA1B0
33.3%	33.3% #61B5B7	RGB 97 181 183	#61B5B7
50.0%	50.0% #76BDB6	RGB 118 189 182	#76BDB6
66.7%	66.7% #8CC4B7	RGB 140 196 183	#8CC4B7
83.3%	83.3% #A3CABC	RGB 163 202 188	#A3CABC
100.0%	100.0% #BCD1C7	RGB 188 209 199	#BCD1C7

#3C8BAA #4EA1B0 #61B5B7 #76BDB6 #8CC4B7 #A3CABC #BCD1C7

#3C8CAA - #76BDB6 - #BCD1C7

CSS codes

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

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