#00CCF0 - #B6F0FA | 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 #00CCF0 to #B6F0FA

#00CCF0 #B6F0FA

Calculate the color between two colors, #00CCF0 and #B6F0FA. 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)

#00CCF0 - #B6F0FA | 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 #00CCF0 as 0% and #B6F0FA as 100%.

0.0%	0.0% #00CCF0	RGB 0 204 240	#00CCF0
16.7%	16.7% #1ED2F1	RGB 30 210 241	#1ED2F1
33.3%	33.3% #3CD8F3	RGB 60 216 243	#3CD8F3
50.0%	50.0% #5BDEF5	RGB 91 222 245	#5BDEF5
66.7%	66.7% #79E4F6	RGB 121 228 246	#79E4F6
83.3%	83.3% #97EAF8	RGB 151 234 248	#97EAF8
100.0%	100.0% #B6F0FA	RGB 182 240 250	#B6F0FA

#00CCF0 #1ED2F1 #3CD8F3 #5BDEF5 #79E4F6 #97EAF8 #B6F0FA

#00CCF0 - #B6F0FA

HSV Blend

#00CCF0 - #B6F0FA | 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 #00CCF0 as 0% and #B6F0FA as 100%.

0.0%	0.0% #00CCF0	RGB 0 204 240	#00CCF0
16.7%	16.7% #1DD1F1	RGB 29 209 241	#1DD1F1
33.3%	33.3% #3BD7F3	RGB 59 215 243	#3BD7F3
50.0%	50.0% #59DDF5	RGB 89 221 245	#59DDF5
66.7%	66.7% #77E3F6	RGB 119 227 246	#77E3F6
83.3%	83.3% #96E9F8	RGB 150 233 248	#96E9F8
100.0%	100.0% #B6F0FA	RGB 182 240 250	#B6F0FA

#00CCF0 #1DD1F1 #3BD7F3 #59DDF5 #77E3F6 #96E9F8 #B6F0FA

#00CCF0 - #59DDF5 - #B6F0FA

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #00CCF0 0%, #59DDF5 50%, #B6F0FA 100%);
    background: -webkit-linear-gradient(top, #00CCF0 0%, #59DDF5 50%, #B6F0FA 100%);
    background: linear-gradient(to bottom, #00CCF0 0%, #59DDF5 50%, #B6F0FA 100%);
}
</style>