#3E86A2 - #BBCCC2 | 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 #3E86A2 to #BBCCC2

#3E86A2 #BBCCC2

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

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

0.0%	0.0% #3E86A2	RGB 62 134 162	#3E86A2
16.7%	16.7% #5291A7	RGB 82 145 167	#5291A7
33.3%	33.3% #679DAC	RGB 103 157 172	#679DAC
50.0%	50.0% #7CA9B2	RGB 124 169 178	#7CA9B2
66.7%	66.7% #91B4B7	RGB 145 180 183	#91B4B7
83.3%	83.3% #A6C0BC	RGB 166 192 188	#A6C0BC
100.0%	100.0% #BBCCC2	RGB 187 204 194	#BBCCC2

#3E86A2 #5291A7 #679DAC #7CA9B2 #91B4B7 #A6C0BC #BBCCC2

#3E86A2 - #BBCCC2

HSV Blend

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

0.0%	0.0% #3E85A2	RGB 62 133 162	#3E85A2
16.7%	16.7% #4F9CA9	RGB 79 156 169	#4F9CA9
33.3%	33.3% #62B0AF	RGB 98 176 175	#62B0AF
50.0%	50.0% #76B7AD	RGB 118 183 173	#76B7AD
66.7%	66.7% #8CBEAF	RGB 140 190 175	#8CBEAF
83.3%	83.3% #A3C5B5	RGB 163 197 181	#A3C5B5
100.0%	100.0% #BBCCC2	RGB 187 204 194	#BBCCC2

#3E85A2 #4F9CA9 #62B0AF #76B7AD #8CBEAF #A3C5B5 #BBCCC2

#3E86A2 - #76B7AD - #BBCCC2

CSS codes

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

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