#ABC8AE - #DEF2FF | 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 #ABC8AE to #DEF2FF

#ABC8AE #DEF2FF

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

#ABC8AE - #DEF2FF | 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 #ABC8AE as 0% and #DEF2FF as 100%.

0.0%	0.0% #ABC8AE	RGB 171 200 174	#ABC8AE
16.7%	16.7% #B3CFBB	RGB 179 207 187	#B3CFBB
33.3%	33.3% #BCD6C9	RGB 188 214 201	#BCD6C9
50.0%	50.0% #C4DDD6	RGB 196 221 214	#C4DDD6
66.7%	66.7% #CDE4E4	RGB 205 228 228	#CDE4E4
83.3%	83.3% #D5EBF1	RGB 213 235 241	#D5EBF1
100.0%	100.0% #DEF2FF	RGB 222 242 255	#DEF2FF

#ABC8AE #B3CFBB #BCD6C9 #C4DDD6 #CDE4E4 #D5EBF1 #DEF2FF

#ABC8AE - #DEF2FF

HSV Blend

#ABC8AE - #DEF2FF | 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 #ABC8AE as 0% and #DEF2FF as 100%.

0.0%	0.0% #ABC8AE	RGB 171 200 174	#ABC8AE
16.7%	16.7% #B3D1BC	RGB 179 209 188	#B3D1BC
33.3%	33.3% #BBDACC	RGB 187 218 204	#BBDACC
50.0%	50.0% #C4E3DB	RGB 196 227 219	#C4E3DB
66.7%	66.7% #CCECEB	RGB 204 236 235	#CCECEB
83.3%	83.3% #D5F0F5	RGB 213 240 245	#D5F0F5
100.0%	100.0% #DEF2FF	RGB 222 242 255	#DEF2FF

#ABC8AE #B3D1BC #BBDACC #C4E3DB #CCECEB #D5F0F5 #DEF2FF

#ABC8AE - #C4E3DB - #DEF2FF

CSS codes

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

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