#AFD7E5 - #5CA3C8 | 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 #AFD7E5 to #5CA3C8

#AFD7E5 #5CA3C8

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

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

0.0%	0.0% #AFD7E5	RGB 175 215 229	#AFD7E5
16.7%	16.7% #A1CEE0	RGB 161 206 224	#A1CEE0
33.3%	33.3% #93C5DB	RGB 147 197 219	#93C5DB
50.0%	50.0% #85BDD6	RGB 133 189 214	#85BDD6
66.7%	66.7% #77B4D1	RGB 119 180 209	#77B4D1
83.3%	83.3% #69ABCC	RGB 105 171 204	#69ABCC
100.0%	100.0% #5CA3C8	RGB 92 163 200	#5CA3C8

#AFD7E5 #A1CEE0 #93C5DB #85BDD6 #77B4D1 #69ABCC #5CA3C8

#AFD7E5 - #5CA3C8

HSV Blend

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

0.0%	0.0% #AFD7E5	RGB 175 215 229	#AFD7E5
16.7%	16.7% #9FCEE0	RGB 159 206 224	#9FCEE0
33.3%	33.3% #91C6DB	RGB 145 198 219	#91C6DB
50.0%	50.0% #83BDD6	RGB 131 189 214	#83BDD6
66.7%	66.7% #75B4D1	RGB 117 180 209	#75B4D1
83.3%	83.3% #68ABCC	RGB 104 171 204	#68ABCC
100.0%	100.0% #5CA3C8	RGB 92 163 200	#5CA3C8

#AFD7E5 #9FCEE0 #91C6DB #83BDD6 #75B4D1 #68ABCC #5CA3C8

#AFD7E5 - #83BDD6 - #5CA3C8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #AFD7E5 0%, #83BDD6 50%, #5CA3C8 100%);
    background: -webkit-linear-gradient(top, #AFD7E5 0%, #83BDD6 50%, #5CA3C8 100%);
    background: linear-gradient(to bottom, #AFD7E5 0%, #83BDD6 50%, #5CA3C8 100%);
}
</style>