#ABC6DB - #5477A1 | 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 #ABC6DB to #5477A1

#ABC6DB #5477A1

Calculate the color between two colors, #ABC6DB and #5477A1. 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)

#ABC6DB - #5477A1 | 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 #ABC6DB as 0% and #5477A1 as 100%.

0.0%	0.0% #ABC6DB	RGB 171 198 219	#ABC6DB
16.7%	16.7% #9CB8D1	RGB 156 184 209	#9CB8D1
33.3%	33.3% #8EABC7	RGB 142 171 199	#8EABC7
50.0%	50.0% #7F9EBE	RGB 127 158 190	#7F9EBE
66.7%	66.7% #7191B4	RGB 113 145 180	#7191B4
83.3%	83.3% #6284AA	RGB 98 132 170	#6284AA
100.0%	100.0% #5477A1	RGB 84 119 161	#5477A1

#ABC6DB #9CB8D1 #8EABC7 #7F9EBE #7191B4 #6284AA #5477A1

#ABC6DB - #5477A1

HSV Blend

#ABC6DB - #5477A1 | 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 #ABC6DB as 0% and #5477A1 as 100%.

0.0%	0.0% #ABC6DB	RGB 171 198 219	#ABC6DB
16.7%	16.7% #9AB8D1	RGB 154 184 209	#9AB8D1
33.3%	33.3% #8AAAC7	RGB 138 170 199	#8AAAC7
50.0%	50.0% #7B9DBE	RGB 123 157 190	#7B9DBE
66.7%	66.7% #6D90B4	RGB 109 144 180	#6D90B4
83.3%	83.3% #6083AA	RGB 96 131 170	#6083AA
100.0%	100.0% #5477A1	RGB 84 119 161	#5477A1

#ABC6DB #9AB8D1 #8AAAC7 #7B9DBE #6D90B4 #6083AA #5477A1

#ABC6DB - #7B9DBE - #5477A1

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABC6DB 0%, #7B9DBE 50%, #5477A1 100%);
    background: -webkit-linear-gradient(top, #ABC6DB 0%, #7B9DBE 50%, #5477A1 100%);
    background: linear-gradient(to bottom, #ABC6DB 0%, #7B9DBE 50%, #5477A1 100%);
}
</style>