#ABC3C9 - #5B7289 | 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 #ABC3C9 to #5B7289

#ABC3C9 #5B7289

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

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

0.0%	0.0% #ABC3C9	RGB 171 195 201	#ABC3C9
16.7%	16.7% #9DB5BE	RGB 157 181 190	#9DB5BE
33.3%	33.3% #90A8B3	RGB 144 168 179	#90A8B3
50.0%	50.0% #839AA9	RGB 131 154 169	#839AA9
66.7%	66.7% #758D9E	RGB 117 141 158	#758D9E
83.3%	83.3% #687F93	RGB 104 127 147	#687F93
100.0%	100.0% #5B7289	RGB 91 114 137	#5B7289

#ABC3C9 #9DB5BE #90A8B3 #839AA9 #758D9E #687F93 #5B7289

#ABC3C9 - #5B7289

HSV Blend

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

0.0%	0.0% #ABC3C9	RGB 171 195 201	#ABC3C9
16.7%	16.7% #9CB5BE	RGB 156 181 190	#9CB5BE
33.3%	33.3% #8DA8B3	RGB 141 168 179	#8DA8B3
50.0%	50.0% #809AA9	RGB 128 154 169	#809AA9
66.7%	66.7% #738D9E	RGB 115 141 158	#738D9E
83.3%	83.3% #667F93	RGB 102 127 147	#667F93
100.0%	100.0% #5B7289	RGB 91 114 137	#5B7289

#ABC3C9 #9CB5BE #8DA8B3 #809AA9 #738D9E #667F93 #5B7289

#ABC3C9 - #809AA9 - #5B7289

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABC3C9 0%, #809AA9 50%, #5B7289 100%);
    background: -webkit-linear-gradient(top, #ABC3C9 0%, #809AA9 50%, #5B7289 100%);
    background: linear-gradient(to bottom, #ABC3C9 0%, #809AA9 50%, #5B7289 100%);
}
</style>