#ABCCD4 - #5A7E98 | 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 #ABCCD4 to #5A7E98

#ABCCD4 #5A7E98

Calculate the color between two colors, #ABCCD4 and #5A7E98. 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)

#ABCCD4 - #5A7E98 | 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 #ABCCD4 as 0% and #5A7E98 as 100%.

0.0%	0.0% #ABCCD4	RGB 171 204 212	#ABCCD4
16.7%	16.7% #9DBFCA	RGB 157 191 202	#9DBFCA
33.3%	33.3% #90B2C0	RGB 144 178 192	#90B2C0
50.0%	50.0% #82A5B6	RGB 130 165 182	#82A5B6
66.7%	66.7% #7598AC	RGB 117 152 172	#7598AC
83.3%	83.3% #678BA2	RGB 103 139 162	#678BA2
100.0%	100.0% #5A7E98	RGB 90 126 152	#5A7E98

#ABCCD4 #9DBFCA #90B2C0 #82A5B6 #7598AC #678BA2 #5A7E98

#ABCCD4 - #5A7E98

HSV Blend

#ABCCD4 - #5A7E98 | 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 #ABCCD4 as 0% and #5A7E98 as 100%.

0.0%	0.0% #ABCCD4	RGB 171 204 212	#ABCCD4
16.7%	16.7% #9BBFCA	RGB 155 191 202	#9BBFCA
33.3%	33.3% #8DB2C0	RGB 141 178 192	#8DB2C0
50.0%	50.0% #7FA5B6	RGB 127 165 182	#7FA5B6
66.7%	66.7% #7298AC	RGB 114 152 172	#7298AC
83.3%	83.3% #658AA2	RGB 101 138 162	#658AA2
100.0%	100.0% #5A7E98	RGB 90 126 152	#5A7E98

#ABCCD4 #9BBFCA #8DB2C0 #7FA5B6 #7298AC #658AA2 #5A7E98

#ABCCD4 - #7FA5B6 - #5A7E98

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABCCD4 0%, #7FA5B6 50%, #5A7E98 100%);
    background: -webkit-linear-gradient(top, #ABCCD4 0%, #7FA5B6 50%, #5A7E98 100%);
    background: linear-gradient(to bottom, #ABCCD4 0%, #7FA5B6 50%, #5A7E98 100%);
}
</style>