#ABCDD9 - #577F9F | 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 #ABCDD9 to #577F9F

#ABCDD9 #577F9F

Calculate the color between two colors, #ABCDD9 and #577F9F. 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)

#ABCDD9 - #577F9F | 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 #ABCDD9 as 0% and #577F9F as 100%.

0.0%	0.0% #ABCDD9	RGB 171 205 217	#ABCDD9
16.7%	16.7% #9DC0CF	RGB 157 192 207	#9DC0CF
33.3%	33.3% #8FB3C5	RGB 143 179 197	#8FB3C5
50.0%	50.0% #81A6BC	RGB 129 166 188	#81A6BC
66.7%	66.7% #7399B2	RGB 115 153 178	#7399B2
83.3%	83.3% #658CA8	RGB 101 140 168	#658CA8
100.0%	100.0% #577F9F	RGB 87 127 159	#577F9F

#ABCDD9 #9DC0CF #8FB3C5 #81A6BC #7399B2 #658CA8 #577F9F

#ABCDD9 - #577F9F

HSV Blend

#ABCDD9 - #577F9F | 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 #ABCDD9 as 0% and #577F9F as 100%.

0.0%	0.0% #ABCDD9	RGB 171 205 217	#ABCDD9
16.7%	16.7% #9BC0CF	RGB 155 192 207	#9BC0CF
33.3%	33.3% #8BB3C5	RGB 139 179 197	#8BB3C5
50.0%	50.0% #7DA5BC	RGB 125 165 188	#7DA5BC
66.7%	66.7% #6F98B2	RGB 111 152 178	#6F98B2
83.3%	83.3% #638BA8	RGB 99 139 168	#638BA8
100.0%	100.0% #577F9F	RGB 87 127 159	#577F9F

#ABCDD9 #9BC0CF #8BB3C5 #7DA5BC #6F98B2 #638BA8 #577F9F

#ABCDD9 - #7DA5BC - #577F9F

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABCDD9 0%, #7DA5BC 50%, #577F9F 100%);
    background: -webkit-linear-gradient(top, #ABCDD9 0%, #7DA5BC 50%, #577F9F 100%);
    background: linear-gradient(to bottom, #ABCDD9 0%, #7DA5BC 50%, #577F9F 100%);
}
</style>