#AFE4C2 - #CFFDF3 | 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 #AFE4C2 to #CFFDF3

#AFE4C2 #CFFDF3

Calculate the color between two colors, #AFE4C2 and #CFFDF3. 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)

#AFE4C2 - #CFFDF3 | 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 #AFE4C2 as 0% and #CFFDF3 as 100%.

0.0%	0.0% #AFE4C2	RGB 175 228 194	#AFE4C2
16.7%	16.7% #B4E8CA	RGB 180 232 202	#B4E8CA
33.3%	33.3% #B9ECD2	RGB 185 236 210	#B9ECD2
50.0%	50.0% #BFF0DA	RGB 191 240 218	#BFF0DA
66.7%	66.7% #C4F4E2	RGB 196 244 226	#C4F4E2
83.3%	83.3% #C9F8EA	RGB 201 248 234	#C9F8EA
100.0%	100.0% #CFFDF3	RGB 207 253 243	#CFFDF3

#AFE4C2 #B4E8CA #B9ECD2 #BFF0DA #C4F4E2 #C9F8EA #CFFDF3

#AFE4C2 - #CFFDF3

HSV Blend

#AFE4C2 - #CFFDF3 | 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 #AFE4C2 as 0% and #CFFDF3 as 100%.

0.0%	0.0% #AFE4C2	RGB 175 228 194	#AFE4C2
16.7%	16.7% #B4E8CA	RGB 180 232 202	#B4E8CA
33.3%	33.3% #B9ECD2	RGB 185 236 210	#B9ECD2
50.0%	50.0% #BEF0DB	RGB 190 240 219	#BEF0DB
66.7%	66.7% #C4F4E3	RGB 196 244 227	#C4F4E3
83.3%	83.3% #C9F8EB	RGB 201 248 235	#C9F8EB
100.0%	100.0% #CFFDF3	RGB 207 253 243	#CFFDF3

#AFE4C2 #B4E8CA #B9ECD2 #BEF0DB #C4F4E3 #C9F8EB #CFFDF3

#AFE4C2 - #BEF0DB - #CFFDF3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #AFE4C2 0%, #BEF0DB 50%, #CFFDF3 100%);
    background: -webkit-linear-gradient(top, #AFE4C2 0%, #BEF0DB 50%, #CFFDF3 100%);
    background: linear-gradient(to bottom, #AFE4C2 0%, #BEF0DB 50%, #CFFDF3 100%);
}
</style>