#ABCADC - #557CA3 | 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 #ABCADC to #557CA3

#ABCADC #557CA3

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

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

0.0%	0.0% #ABCADC	RGB 171 202 220	#ABCADC
16.7%	16.7% #9CBDD2	RGB 156 189 210	#9CBDD2
33.3%	33.3% #8EB0C9	RGB 142 176 201	#8EB0C9
50.0%	50.0% #80A3BF	RGB 128 163 191	#80A3BF
66.7%	66.7% #7196B6	RGB 113 150 182	#7196B6
83.3%	83.3% #6389AC	RGB 99 137 172	#6389AC
100.0%	100.0% #557CA3	RGB 85 124 163	#557CA3

#ABCADC #9CBDD2 #8EB0C9 #80A3BF #7196B6 #6389AC #557CA3

#ABCADC - #557CA3

HSV Blend

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

0.0%	0.0% #ABCADC	RGB 171 202 220	#ABCADC
16.7%	16.7% #9ABCD2	RGB 154 188 210	#9ABCD2
33.3%	33.3% #8BAFC9	RGB 139 175 201	#8BAFC9
50.0%	50.0% #7CA2BF	RGB 124 162 191	#7CA2BF
66.7%	66.7% #6E95B6	RGB 110 149 182	#6E95B6
83.3%	83.3% #6188AC	RGB 97 136 172	#6188AC
100.0%	100.0% #557CA3	RGB 85 124 163	#557CA3

#ABCADC #9ABCD2 #8BAFC9 #7CA2BF #6E95B6 #6188AC #557CA3

#ABCADC - #7CA2BF - #557CA3

CSS codes

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

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