#3C96BE - #C7DFEC | 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 #3C96BE to #C7DFEC

#3C96BE #C7DFEC

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

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

0.0%	0.0% #3C96BE	RGB 60 150 190	#3C96BE
16.7%	16.7% #53A2C5	RGB 83 162 197	#53A2C5
33.3%	33.3% #6AAECD	RGB 106 174 205	#6AAECD
50.0%	50.0% #81BAD5	RGB 129 186 213	#81BAD5
66.7%	66.7% #98C6DC	RGB 152 198 220	#98C6DC
83.3%	83.3% #AFD2E4	RGB 175 210 228	#AFD2E4
100.0%	100.0% #C7DFEC	RGB 199 223 236	#C7DFEC

#3C96BE #53A2C5 #6AAECD #81BAD5 #98C6DC #AFD2E4 #C7DFEC

#3C96BE - #C7DFEC

HSV Blend

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

0.0%	0.0% #3C96BE	RGB 60 150 190	#3C96BE
16.7%	16.7% #4FA0C5	RGB 79 160 197	#4FA0C5
33.3%	33.3% #64ABCD	RGB 100 171 205	#64ABCD
50.0%	50.0% #7BB7D5	RGB 123 183 213	#7BB7D5
66.7%	66.7% #93C3DC	RGB 147 195 220	#93C3DC
83.3%	83.3% #ACD1E4	RGB 172 209 228	#ACD1E4
100.0%	100.0% #C7DFEC	RGB 199 223 236	#C7DFEC

#3C96BE #4FA0C5 #64ABCD #7BB7D5 #93C3DC #ACD1E4 #C7DFEC

#3C96BE - #7BB7D5 - #C7DFEC

CSS codes

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

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