#04CCFF - #B7F0FF | 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 #04CCFF to #B7F0FF

#04CCFF #B7F0FF

Calculate the color between two colors, #04CCFF and #B7F0FF. 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)

#04CCFF - #B7F0FF | 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 #04CCFF as 0% and #B7F0FF as 100%.

0.0%	0.0% #04CCFF	RGB 4 204 255	#04CCFF
16.7%	16.7% #21D2FF	RGB 33 210 255	#21D2FF
33.3%	33.3% #3FD8FF	RGB 63 216 255	#3FD8FF
50.0%	50.0% #5DDEFF	RGB 93 222 255	#5DDEFF
66.7%	66.7% #7BE4FF	RGB 123 228 255	#7BE4FF
83.3%	83.3% #99EAFF	RGB 153 234 255	#99EAFF
100.0%	100.0% #B7F0FF	RGB 183 240 255	#B7F0FF

#04CCFF #21D2FF #3FD8FF #5DDEFF #7BE4FF #99EAFF #B7F0FF

#04CCFF - #B7F0FF

HSV Blend

#04CCFF - #B7F0FF | 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 #04CCFF as 0% and #B7F0FF as 100%.

0.0%	0.0% #03CBFF	RGB 3 203 255	#03CBFF
16.7%	16.7% #21D1FF	RGB 33 209 255	#21D1FF
33.3%	33.3% #3FD7FF	RGB 63 215 255	#3FD7FF
50.0%	50.0% #5DDDFF	RGB 93 221 255	#5DDDFF
66.7%	66.7% #7BE3FF	RGB 123 227 255	#7BE3FF
83.3%	83.3% #99E9FF	RGB 153 233 255	#99E9FF
100.0%	100.0% #B7F0FF	RGB 183 240 255	#B7F0FF

#03CBFF #21D1FF #3FD7FF #5DDDFF #7BE3FF #99E9FF #B7F0FF

#04CCFF - #5DDDFF - #B7F0FF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #03CBFF 0%, #5DDDFF 50%, #B7F0FF 100%);
    background: -webkit-linear-gradient(top, #03CBFF 0%, #5DDDFF 50%, #B7F0FF 100%);
    background: linear-gradient(to bottom, #03CBFF 0%, #5DDDFF 50%, #B7F0FF 100%);
}
</style>