#AFC5E2 - #5476AA | 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 #AFC5E2 to #5476AA

#AFC5E2 #5476AA

Calculate the color between two colors, #AFC5E2 and #5476AA. 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)

#AFC5E2 - #5476AA | 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 #AFC5E2 as 0% and #5476AA as 100%.

0.0%	0.0% #AFC5E2	RGB 175 197 226	#AFC5E2
16.7%	16.7% #9FB7D8	RGB 159 183 216	#9FB7D8
33.3%	33.3% #90AACF	RGB 144 170 207	#90AACF
50.0%	50.0% #819DC6	RGB 129 157 198	#819DC6
66.7%	66.7% #7290BC	RGB 114 144 188	#7290BC
83.3%	83.3% #6383B3	RGB 99 131 179	#6383B3
100.0%	100.0% #5476AA	RGB 84 118 170	#5476AA

#AFC5E2 #9FB7D8 #90AACF #819DC6 #7290BC #6383B3 #5476AA

#AFC5E2 - #5476AA

HSV Blend

#AFC5E2 - #5476AA | 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 #AFC5E2 as 0% and #5476AA as 100%.

0.0%	0.0% #AFC5E2	RGB 175 197 226	#AFC5E2
16.7%	16.7% #9DB6D8	RGB 157 182 216	#9DB6D8
33.3%	33.3% #8DA8CF	RGB 141 168 207	#8DA8CF
50.0%	50.0% #7D9BC6	RGB 125 155 198	#7D9BC6
66.7%	66.7% #6E8EBC	RGB 110 142 188	#6E8EBC
83.3%	83.3% #6082B3	RGB 96 130 179	#6082B3
100.0%	100.0% #5476AA	RGB 84 118 170	#5476AA

#AFC5E2 #9DB6D8 #8DA8CF #7D9BC6 #6E8EBC #6082B3 #5476AA

#AFC5E2 - #7D9BC6 - #5476AA

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #AFC5E2 0%, #7D9BC6 50%, #5476AA 100%);
    background: -webkit-linear-gradient(top, #AFC5E2 0%, #7D9BC6 50%, #5476AA 100%);
    background: linear-gradient(to bottom, #AFC5E2 0%, #7D9BC6 50%, #5476AA 100%);
}
</style>