#3C8DF3 - #8DD0F6 | 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 #3C8DF3 to #8DD0F6

#3C8DF3 #8DD0F6

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

#3C8DF3 - #8DD0F6 | 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 #3C8DF3 as 0% and #8DD0F6 as 100%.

0.0%	0.0% #3C8DF3	RGB 60 141 243	#3C8DF3
16.7%	16.7% #4998F3	RGB 73 152 243	#4998F3
33.3%	33.3% #57A3F4	RGB 87 163 244	#57A3F4
50.0%	50.0% #64AEF4	RGB 100 174 244	#64AEF4
66.7%	66.7% #72B9F5	RGB 114 185 245	#72B9F5
83.3%	83.3% #7FC4F5	RGB 127 196 245	#7FC4F5
100.0%	100.0% #8DD0F6	RGB 141 208 246	#8DD0F6

#3C8DF3 #4998F3 #57A3F4 #64AEF4 #72B9F5 #7FC4F5 #8DD0F6

#3C8DF3 - #8DD0F6

HSV Blend

#3C8DF3 - #8DD0F6 | 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 #3C8DF3 as 0% and #8DD0F6 as 100%.

0.0%	0.0% #3B8DF3	RGB 59 141 243	#3B8DF3
16.7%	16.7% #499AF3	RGB 73 154 243	#499AF3
33.3%	33.3% #56A6F4	RGB 86 166 244	#56A6F4
50.0%	50.0% #64B2F4	RGB 100 178 244	#64B2F4
66.7%	66.7% #71BCF5	RGB 113 188 245	#71BCF5
83.3%	83.3% #7FC6F5	RGB 127 198 245	#7FC6F5
100.0%	100.0% #8DD0F6	RGB 141 208 246	#8DD0F6

#3B8DF3 #499AF3 #56A6F4 #64B2F4 #71BCF5 #7FC6F5 #8DD0F6

#3C8DF3 - #64B2F4 - #8DD0F6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3B8DF3 0%, #64B2F4 50%, #8DD0F6 100%);
    background: -webkit-linear-gradient(top, #3B8DF3 0%, #64B2F4 50%, #8DD0F6 100%);
    background: linear-gradient(to bottom, #3B8DF3 0%, #64B2F4 50%, #8DD0F6 100%);
}
</style>