#3C90C4 - #C7DFEE | 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 #3C90C4 to #C7DFEE

#3C90C4 #C7DFEE

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

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

0.0%	0.0% #3C90C4	RGB 60 144 196	#3C90C4
16.7%	16.7% #539DCB	RGB 83 157 203	#539DCB
33.3%	33.3% #6AAAD2	RGB 106 170 210	#6AAAD2
50.0%	50.0% #81B7D9	RGB 129 183 217	#81B7D9
66.7%	66.7% #98C4E0	RGB 152 196 224	#98C4E0
83.3%	83.3% #AFD1E7	RGB 175 209 231	#AFD1E7
100.0%	100.0% #C7DFEE	RGB 199 223 238	#C7DFEE

#3C90C4 #539DCB #6AAAD2 #81B7D9 #98C4E0 #AFD1E7 #C7DFEE

#3C90C4 - #C7DFEE

HSV Blend

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

0.0%	0.0% #3C90C4	RGB 60 144 196	#3C90C4
16.7%	16.7% #509BCB	RGB 80 155 203	#509BCB
33.3%	33.3% #65A8D2	RGB 101 168 210	#65A8D2
50.0%	50.0% #7BB5D9	RGB 123 181 217	#7BB5D9
66.7%	66.7% #93C2E0	RGB 147 194 224	#93C2E0
83.3%	83.3% #ACD0E7	RGB 172 208 231	#ACD0E7
100.0%	100.0% #C7DFEE	RGB 199 223 238	#C7DFEE

#3C90C4 #509BCB #65A8D2 #7BB5D9 #93C2E0 #ACD0E7 #C7DFEE

#3C90C4 - #7BB5D9 - #C7DFEE

CSS codes

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

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