#AFD0FF - #4D80D7 | 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 #AFD0FF to #4D80D7

#AFD0FF #4D80D7

Calculate the color between two colors, #AFD0FF and #4D80D7. 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)

#AFD0FF - #4D80D7 | 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 #AFD0FF as 0% and #4D80D7 as 100%.

0.0%	0.0% #AFD0FF	RGB 175 208 255	#AFD0FF
16.7%	16.7% #9EC2F8	RGB 158 194 248	#9EC2F8
33.3%	33.3% #8EB5F1	RGB 142 181 241	#8EB5F1
50.0%	50.0% #7EA8EB	RGB 126 168 235	#7EA8EB
66.7%	66.7% #6D9AE4	RGB 109 154 228	#6D9AE4
83.3%	83.3% #5D8DDD	RGB 93 141 221	#5D8DDD
100.0%	100.0% #4D80D7	RGB 77 128 215	#4D80D7

#AFD0FF #9EC2F8 #8EB5F1 #7EA8EB #6D9AE4 #5D8DDD #4D80D7

#AFD0FF - #4D80D7

HSV Blend

#AFD0FF - #4D80D7 | 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 #AFD0FF as 0% and #4D80D7 as 100%.

0.0%	0.0% #AFD0FF	RGB 175 208 255	#AFD0FF
16.7%	16.7% #9CC1F8	RGB 156 193 248	#9CC1F8
33.3%	33.3% #8BB4F1	RGB 139 180 241	#8BB4F1
50.0%	50.0% #7AA6EB	RGB 122 166 235	#7AA6EB
66.7%	66.7% #6A99E4	RGB 106 153 228	#6A99E4
83.3%	83.3% #5B8CDD	RGB 91 140 221	#5B8CDD
100.0%	100.0% #4D80D7	RGB 77 128 215	#4D80D7

#AFD0FF #9CC1F8 #8BB4F1 #7AA6EB #6A99E4 #5B8CDD #4D80D7

#AFD0FF - #7AA6EB - #4D80D7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #AFD0FF 0%, #7AA6EB 50%, #4D80D7 100%);
    background: -webkit-linear-gradient(top, #AFD0FF 0%, #7AA6EB 50%, #4D80D7 100%);
    background: linear-gradient(to bottom, #AFD0FF 0%, #7AA6EB 50%, #4D80D7 100%);
}
</style>