#ABCBCA - #CADFBE | 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 #ABCBCA to #CADFBE

#ABCBCA #CADFBE

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

#ABCBCA - #CADFBE | 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 #ABCBCA as 0% and #CADFBE as 100%.

0.0%	0.0% #ABCBCA	RGB 171 203 202	#ABCBCA
16.7%	16.7% #B0CEC8	RGB 176 206 200	#B0CEC8
33.3%	33.3% #B5D1C6	RGB 181 209 198	#B5D1C6
50.0%	50.0% #BAD5C4	RGB 186 213 196	#BAD5C4
66.7%	66.7% #BFD8C2	RGB 191 216 194	#BFD8C2
83.3%	83.3% #C4DBC0	RGB 196 219 192	#C4DBC0
100.0%	100.0% #CADFBE	RGB 202 223 190	#CADFBE

#ABCBCA #B0CEC8 #B5D1C6 #BAD5C4 #BFD8C2 #C4DBC0 #CADFBE

#ABCBCA - #CADFBE

HSV Blend

#ABCBCA - #CADFBE | 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 #ABCBCA as 0% and #CADFBE as 100%.

0.0%	0.0% #ABCBCA	RGB 171 203 202	#ABCBCA
16.7%	16.7% #AECEC6	RGB 174 206 198	#AECEC6
33.3%	33.3% #B1D1C2	RGB 177 209 194	#B1D1C2
50.0%	50.0% #B4D5BE	RGB 180 213 190	#B4D5BE
66.7%	66.7% #B7D8BA	RGB 183 216 186	#B7D8BA
83.3%	83.3% #BFDBBA	RGB 191 219 186	#BFDBBA
100.0%	100.0% #CADFBE	RGB 202 223 190	#CADFBE

#ABCBCA #AECEC6 #B1D1C2 #B4D5BE #B7D8BA #BFDBBA #CADFBE

#ABCBCA - #B4D5BE - #CADFBE

CSS codes

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

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