#3E86B5 - #C7DBE9 | 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 #3E86B5 to #C7DBE9

#3E86B5 #C7DBE9

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

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

0.0%	0.0% #3E86B5	RGB 62 134 181	#3E86B5
16.7%	16.7% #5494BD	RGB 84 148 189	#5494BD
33.3%	33.3% #6BA2C6	RGB 107 162 198	#6BA2C6
50.0%	50.0% #82B0CF	RGB 130 176 207	#82B0CF
66.7%	66.7% #99BED7	RGB 153 190 215	#99BED7
83.3%	83.3% #B0CCE0	RGB 176 204 224	#B0CCE0
100.0%	100.0% #C7DBE9	RGB 199 219 233	#C7DBE9

#3E86B5 #5494BD #6BA2C6 #82B0CF #99BED7 #B0CCE0 #C7DBE9

#3E86B5 - #C7DBE9

HSV Blend

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

0.0%	0.0% #3E86B5	RGB 62 134 181	#3E86B5
16.7%	16.7% #5192BD	RGB 81 146 189	#5192BD
33.3%	33.3% #659FC6	RGB 101 159 198	#659FC6
50.0%	50.0% #7BADCF	RGB 123 173 207	#7BADCF
66.7%	66.7% #93BBD7	RGB 147 187 215	#93BBD7
83.3%	83.3% #ACCBE0	RGB 172 203 224	#ACCBE0
100.0%	100.0% #C7DBE9	RGB 199 219 233	#C7DBE9

#3E86B5 #5192BD #659FC6 #7BADCF #93BBD7 #ACCBE0 #C7DBE9

#3E86B5 - #7BADCF - #C7DBE9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3E86B5 0%, #7BADCF 50%, #C7DBE9 100%);
    background: -webkit-linear-gradient(top, #3E86B5 0%, #7BADCF 50%, #C7DBE9 100%);
    background: linear-gradient(to bottom, #3E86B5 0%, #7BADCF 50%, #C7DBE9 100%);
}
</style>