#4FD7FF - #00CCC4 | 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 #4FD7FF to #00CCC4

#4FD7FF #00CCC4

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

#4FD7FF - #00CCC4 | 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 #4FD7FF as 0% and #00CCC4 as 100%.

0.0%	0.0% #4FD7FF	RGB 79 215 255	#4FD7FF
16.7%	16.7% #41D5F5	RGB 65 213 245	#41D5F5
33.3%	33.3% #34D3EB	RGB 52 211 235	#34D3EB
50.0%	50.0% #27D1E1	RGB 39 209 225	#27D1E1
66.7%	66.7% #1ACFD7	RGB 26 207 215	#1ACFD7
83.3%	83.3% #0DCDCD	RGB 13 205 205	#0DCDCD
100.0%	100.0% #00CCC4	RGB 0 204 196	#00CCC4

#4FD7FF #41D5F5 #34D3EB #27D1E1 #1ACFD7 #0DCDCD #00CCC4

#4FD7FF - #00CCC4

HSV Blend

#4FD7FF - #00CCC4 | 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 #4FD7FF as 0% and #00CCC4 as 100%.

0.0%	0.0% #4FD7FF	RGB 79 215 255	#4FD7FF
16.7%	16.7% #3FD5F6	RGB 63 213 246	#3FD5F6
33.3%	33.3% #31D3EE	RGB 49 211 238	#31D3EE
50.0%	50.0% #23D3E5	RGB 35 211 229	#23D3E5
66.7%	66.7% #16D3DD	RGB 22 211 221	#16D3DD
83.3%	83.3% #0AD3D4	RGB 10 211 212	#0AD3D4
100.0%	100.0% #00CCC4	RGB 0 204 196	#00CCC4

#4FD7FF #3FD5F6 #31D3EE #23D3E5 #16D3DD #0AD3D4 #00CCC4

#4FD7FF - #23D3E5 - #00CCC4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4FD7FF 0%, #23D3E5 50%, #00CCC4 100%);
    background: -webkit-linear-gradient(top, #4FD7FF 0%, #23D3E5 50%, #00CCC4 100%);
    background: linear-gradient(to bottom, #4FD7FF 0%, #23D3E5 50%, #00CCC4 100%);
}
</style>