#3C8FC9 - #C7DFEF | 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 #3C8FC9 to #C7DFEF

#3C8FC9 #C7DFEF

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

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

0.0%	0.0% #3C8FC9	RGB 60 143 201	#3C8FC9
16.7%	16.7% #539CCF	RGB 83 156 207	#539CCF
33.3%	33.3% #6AA9D5	RGB 106 169 213	#6AA9D5
50.0%	50.0% #81B7DC	RGB 129 183 220	#81B7DC
66.7%	66.7% #98C4E2	RGB 152 196 226	#98C4E2
83.3%	83.3% #AFD1E8	RGB 175 209 232	#AFD1E8
100.0%	100.0% #C7DFEF	RGB 199 223 239	#C7DFEF

#3C8FC9 #539CCF #6AA9D5 #81B7DC #98C4E2 #AFD1E8 #C7DFEF

#3C8FC9 - #C7DFEF

HSV Blend

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

0.0%	0.0% #3C8FC9	RGB 60 143 201	#3C8FC9
16.7%	16.7% #509BCF	RGB 80 155 207	#509BCF
33.3%	33.3% #65A8D5	RGB 101 168 213	#65A8D5
50.0%	50.0% #7CB5DC	RGB 124 181 220	#7CB5DC
66.7%	66.7% #94C2E2	RGB 148 194 226	#94C2E2
83.3%	83.3% #ADD0E8	RGB 173 208 232	#ADD0E8
100.0%	100.0% #C7DFEF	RGB 199 223 239	#C7DFEF

#3C8FC9 #509BCF #65A8D5 #7CB5DC #94C2E2 #ADD0E8 #C7DFEF

#3C8FC9 - #7CB5DC - #C7DFEF

CSS codes

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

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