#ACCBDF - #557DA7 | 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 #ACCBDF to #557DA7

#ACCBDF #557DA7

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

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

0.0%	0.0% #ACCBDF	RGB 172 203 223	#ACCBDF
16.7%	16.7% #9DBED5	RGB 157 190 213	#9DBED5
33.3%	33.3% #8FB1CC	RGB 143 177 204	#8FB1CC
50.0%	50.0% #80A4C3	RGB 128 164 195	#80A4C3
66.7%	66.7% #7297B9	RGB 114 151 185	#7297B9
83.3%	83.3% #638AB0	RGB 99 138 176	#638AB0
100.0%	100.0% #557DA7	RGB 85 125 167	#557DA7

#ACCBDF #9DBED5 #8FB1CC #80A4C3 #7297B9 #638AB0 #557DA7

#ACCBDF - #557DA7

HSV Blend

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

0.0%	0.0% #ACCBDF	RGB 172 203 223	#ACCBDF
16.7%	16.7% #9BBDD5	RGB 155 189 213	#9BBDD5
33.3%	33.3% #8BB0CC	RGB 139 176 204	#8BB0CC
50.0%	50.0% #7CA3C3	RGB 124 163 195	#7CA3C3
66.7%	66.7% #6E96B9	RGB 110 150 185	#6E96B9
83.3%	83.3% #6189B0	RGB 97 137 176	#6189B0
100.0%	100.0% #557DA7	RGB 85 125 167	#557DA7

#ACCBDF #9BBDD5 #8BB0CC #7CA3C3 #6E96B9 #6189B0 #557DA7

#ACCBDF - #7CA3C3 - #557DA7

CSS codes

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

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