#A8CAD6 - #557C9B | 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 #A8CAD6 to #557C9B

#A8CAD6 #557C9B

Calculate the color between two colors, #A8CAD6 and #557C9B. 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)

#A8CAD6 - #557C9B | 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 #A8CAD6 as 0% and #557C9B as 100%.

0.0%	0.0% #A8CAD6	RGB 168 202 214	#A8CAD6
16.7%	16.7% #9ABDCC	RGB 154 189 204	#9ABDCC
33.3%	33.3% #8CB0C2	RGB 140 176 194	#8CB0C2
50.0%	50.0% #7EA3B8	RGB 126 163 184	#7EA3B8
66.7%	66.7% #7096AE	RGB 112 150 174	#7096AE
83.3%	83.3% #6289A4	RGB 98 137 164	#6289A4
100.0%	100.0% #557C9B	RGB 85 124 155	#557C9B

#A8CAD6 #9ABDCC #8CB0C2 #7EA3B8 #7096AE #6289A4 #557C9B

#A8CAD6 - #557C9B

HSV Blend

#A8CAD6 - #557C9B | 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 #A8CAD6 as 0% and #557C9B as 100%.

0.0%	0.0% #A8CAD6	RGB 168 202 214	#A8CAD6
16.7%	16.7% #98BDCC	RGB 152 189 204	#98BDCC
33.3%	33.3% #89AFC2	RGB 137 175 194	#89AFC2
50.0%	50.0% #7BA2B8	RGB 123 162 184	#7BA2B8
66.7%	66.7% #6D95AE	RGB 109 149 174	#6D95AE
83.3%	83.3% #6088A4	RGB 96 136 164	#6088A4
100.0%	100.0% #557C9B	RGB 85 124 155	#557C9B

#A8CAD6 #98BDCC #89AFC2 #7BA2B8 #6D95AE #6088A4 #557C9B

#A8CAD6 - #7BA2B8 - #557C9B

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #A8CAD6 0%, #7BA2B8 50%, #557C9B 100%);
    background: -webkit-linear-gradient(top, #A8CAD6 0%, #7BA2B8 50%, #557C9B 100%);
    background: linear-gradient(to bottom, #A8CAD6 0%, #7BA2B8 50%, #557C9B 100%);
}
</style>