#9CD0FF - #3C81D9 | 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 #9CD0FF to #3C81D9

#9CD0FF #3C81D9

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

#9CD0FF - #3C81D9 | 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 #9CD0FF as 0% and #3C81D9 as 100%.

0.0%	0.0% #9CD0FF	RGB 156 208 255	#9CD0FF
16.7%	16.7% #8CC2F8	RGB 140 194 248	#8CC2F8
33.3%	33.3% #7CB5F2	RGB 124 181 242	#7CB5F2
50.0%	50.0% #6CA8EC	RGB 108 168 236	#6CA8EC
66.7%	66.7% #5C9BE5	RGB 92 155 229	#5C9BE5
83.3%	83.3% #4C8EDF	RGB 76 142 223	#4C8EDF
100.0%	100.0% #3C81D9	RGB 60 129 217	#3C81D9

#9CD0FF #8CC2F8 #7CB5F2 #6CA8EC #5C9BE5 #4C8EDF #3C81D9

#9CD0FF - #3C81D9

HSV Blend

#9CD0FF - #3C81D9 | 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 #9CD0FF as 0% and #3C81D9 as 100%.

0.0%	0.0% #9CD0FF	RGB 156 208 255	#9CD0FF
16.7%	16.7% #8AC2F8	RGB 138 194 248	#8AC2F8
33.3%	33.3% #79B5F2	RGB 121 181 242	#79B5F2
50.0%	50.0% #68A8EC	RGB 104 168 236	#68A8EC
66.7%	66.7% #599AE5	RGB 89 154 229	#599AE5
83.3%	83.3% #4A8DDF	RGB 74 141 223	#4A8DDF
100.0%	100.0% #3C81D9	RGB 60 129 217	#3C81D9

#9CD0FF #8AC2F8 #79B5F2 #68A8EC #599AE5 #4A8DDF #3C81D9

#9CD0FF - #68A8EC - #3C81D9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #9CD0FF 0%, #68A8EC 50%, #3C81D9 100%);
    background: -webkit-linear-gradient(top, #9CD0FF 0%, #68A8EC 50%, #3C81D9 100%);
    background: linear-gradient(to bottom, #9CD0FF 0%, #68A8EC 50%, #3C81D9 100%);
}
</style>