#ABC3E7 - #CAE3D0 | 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 #ABC3E7 to #CAE3D0

#ABC3E7 #CAE3D0

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

#ABC3E7 - #CAE3D0 | 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 #ABC3E7 as 0% and #CAE3D0 as 100%.

0.0%	0.0% #ABC3E7	RGB 171 195 231	#ABC3E7
16.7%	16.7% #B0C8E3	RGB 176 200 227	#B0C8E3
33.3%	33.3% #B5CDDF	RGB 181 205 223	#B5CDDF
50.0%	50.0% #BAD3DB	RGB 186 211 219	#BAD3DB
66.7%	66.7% #BFD8D7	RGB 191 216 215	#BFD8D7
83.3%	83.3% #C4DDD3	RGB 196 221 211	#C4DDD3
100.0%	100.0% #CAE3D0	RGB 202 227 208	#CAE3D0

#ABC3E7 #B0C8E3 #B5CDDF #BAD3DB #BFD8D7 #C4DDD3 #CAE3D0

#ABC3E7 - #CAE3D0

HSV Blend

#ABC3E7 - #CAE3D0 | 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 #ABC3E7 as 0% and #CAE3D0 as 100%.

0.0%	0.0% #ABC3E7	RGB 171 195 231	#ABC3E7
16.7%	16.7% #B0D2E6	RGB 176 210 230	#B0D2E6
33.3%	33.3% #B5DEE5	RGB 181 222 229	#B5DEE5
50.0%	50.0% #BAE5E1	RGB 186 229 225	#BAE5E1
66.7%	66.7% #BFE4D9	RGB 191 228 217	#BFE4D9
83.3%	83.3% #C4E3D3	RGB 196 227 211	#C4E3D3
100.0%	100.0% #CAE3D0	RGB 202 227 208	#CAE3D0

#ABC3E7 #B0D2E6 #B5DEE5 #BAE5E1 #BFE4D9 #C4E3D3 #CAE3D0

#ABC3E7 - #BAE5E1 - #CAE3D0

CSS codes

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

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