#8CC2FF - #2F6FD7 | 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 #8CC2FF to #2F6FD7

#8CC2FF #2F6FD7

Calculate the color between two colors, #8CC2FF and #2F6FD7. 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)

#8CC2FF - #2F6FD7 | 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 #8CC2FF as 0% and #2F6FD7 as 100%.

0.0%	0.0% #8CC2FF	RGB 140 194 255	#8CC2FF
16.7%	16.7% #7CB4F8	RGB 124 180 248	#7CB4F8
33.3%	33.3% #6DA6F1	RGB 109 166 241	#6DA6F1
50.0%	50.0% #5D98EB	RGB 93 152 235	#5D98EB
66.7%	66.7% #4E8AE4	RGB 78 138 228	#4E8AE4
83.3%	83.3% #3E7CDD	RGB 62 124 221	#3E7CDD
100.0%	100.0% #2F6FD7	RGB 47 111 215	#2F6FD7

#8CC2FF #7CB4F8 #6DA6F1 #5D98EB #4E8AE4 #3E7CDD #2F6FD7

#8CC2FF - #2F6FD7

HSV Blend

#8CC2FF - #2F6FD7 | 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 #8CC2FF as 0% and #2F6FD7 as 100%.

0.0%	0.0% #8CC2FF	RGB 140 194 255	#8CC2FF
16.7%	16.7% #7AB3F8	RGB 122 179 248	#7AB3F8
33.3%	33.3% #6AA5F1	RGB 106 165 241	#6AA5F1
50.0%	50.0% #5A97EB	RGB 90 151 235	#5A97EB
66.7%	66.7% #4B89E4	RGB 75 137 228	#4B89E4
83.3%	83.3% #3C7CDD	RGB 60 124 221	#3C7CDD
100.0%	100.0% #2F6FD7	RGB 47 111 215	#2F6FD7

#8CC2FF #7AB3F8 #6AA5F1 #5A97EB #4B89E4 #3C7CDD #2F6FD7

#8CC2FF - #5A97EB - #2F6FD7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #8CC2FF 0%, #5A97EB 50%, #2F6FD7 100%);
    background: -webkit-linear-gradient(top, #8CC2FF 0%, #5A97EB 50%, #2F6FD7 100%);
    background: linear-gradient(to bottom, #8CC2FF 0%, #5A97EB 50%, #2F6FD7 100%);
}
</style>