#3E86EC - #C7DCF9 | 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 #3E86EC to #C7DCF9

#3E86EC #C7DCF9

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

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

0.0%	0.0% #3E86EC	RGB 62 134 236	#3E86EC
16.7%	16.7% #5494EE	RGB 84 148 238	#5494EE
33.3%	33.3% #6BA2F0	RGB 107 162 240	#6BA2F0
50.0%	50.0% #82B1F2	RGB 130 177 242	#82B1F2
66.7%	66.7% #99BFF4	RGB 153 191 244	#99BFF4
83.3%	83.3% #B0CDF6	RGB 176 205 246	#B0CDF6
100.0%	100.0% #C7DCF9	RGB 199 220 249	#C7DCF9

#3E86EC #5494EE #6BA2F0 #82B1F2 #99BFF4 #B0CDF6 #C7DCF9

#3E86EC - #C7DCF9

HSV Blend

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

0.0%	0.0% #3E86EC	RGB 62 134 236	#3E86EC
16.7%	16.7% #5393EE	RGB 83 147 238	#5393EE
33.3%	33.3% #6AA1F0	RGB 106 161 240	#6AA1F0
50.0%	50.0% #80B0F2	RGB 128 176 242	#80B0F2
66.7%	66.7% #97BEF4	RGB 151 190 244	#97BEF4
83.3%	83.3% #AFCDF6	RGB 175 205 246	#AFCDF6
100.0%	100.0% #C7DCF9	RGB 199 220 249	#C7DCF9

#3E86EC #5393EE #6AA1F0 #80B0F2 #97BEF4 #AFCDF6 #C7DCF9

#3E86EC - #80B0F2 - #C7DCF9

CSS codes

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

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