#4DC4D4 - #CCEEF2 | 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 #4DC4D4 to #CCEEF2

#4DC4D4 #CCEEF2

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

#4DC4D4 - #CCEEF2 | 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 #4DC4D4 as 0% and #CCEEF2 as 100%.

0.0%	0.0% #4DC4D4	RGB 77 196 212	#4DC4D4
16.7%	16.7% #62CBD9	RGB 98 203 217	#62CBD9
33.3%	33.3% #77D2DE	RGB 119 210 222	#77D2DE
50.0%	50.0% #8CD9E3	RGB 140 217 227	#8CD9E3
66.7%	66.7% #A1E0E8	RGB 161 224 232	#A1E0E8
83.3%	83.3% #B6E7ED	RGB 182 231 237	#B6E7ED
100.0%	100.0% #CCEEF2	RGB 204 238 242	#CCEEF2

#4DC4D4 #62CBD9 #77D2DE #8CD9E3 #A1E0E8 #B6E7ED #CCEEF2

#4DC4D4 - #CCEEF2

HSV Blend

#4DC4D4 - #CCEEF2 | 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 #4DC4D4 as 0% and #CCEEF2 as 100%.

0.0%	0.0% #4DC4D4	RGB 77 196 212	#4DC4D4
16.7%	16.7% #60CAD9	RGB 96 202 217	#60CAD9
33.3%	33.3% #74D1DE	RGB 116 209 222	#74D1DE
50.0%	50.0% #88D8E3	RGB 136 216 227	#88D8E3
66.7%	66.7% #9EDFE8	RGB 158 223 232	#9EDFE8
83.3%	83.3% #B4E6ED	RGB 180 230 237	#B4E6ED
100.0%	100.0% #CCEEF2	RGB 204 238 242	#CCEEF2

#4DC4D4 #60CAD9 #74D1DE #88D8E3 #9EDFE8 #B4E6ED #CCEEF2

#4DC4D4 - #88D8E3 - #CCEEF2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4DC4D4 0%, #88D8E3 50%, #CCEEF2 100%);
    background: -webkit-linear-gradient(top, #4DC4D4 0%, #88D8E3 50%, #CCEEF2 100%);
    background: linear-gradient(to bottom, #4DC4D4 0%, #88D8E3 50%, #CCEEF2 100%);
}
</style>