#503AC2 - #AFECDD | 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 #503AC2 to #AFECDD

#503AC2 #AFECDD

Calculate the color between two colors, #503AC2 and #AFECDD. 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)

#503AC2 - #AFECDD | 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 #503AC2 as 0% and #AFECDD as 100%.

0.0%	0.0% #503AC2	RGB 80 58 194	#503AC2
16.7%	16.7% #5F57C6	RGB 95 87 198	#5F57C6
33.3%	33.3% #6F75CB	RGB 111 117 203	#6F75CB
50.0%	50.0% #7F93CF	RGB 127 147 207	#7F93CF
66.7%	66.7% #8FB0D4	RGB 143 176 212	#8FB0D4
83.3%	83.3% #9FCED8	RGB 159 206 216	#9FCED8
100.0%	100.0% #AFECDD	RGB 175 236 221	#AFECDD

#503AC2 #5F57C6 #6F75CB #7F93CF #8FB0D4 #9FCED8 #AFECDD

#503AC2 - #AFECDD

HSV Blend

#503AC2 - #AFECDD | 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 #503AC2 as 0% and #AFECDD as 100%.

0.0%	0.0% #4F3AC2	RGB 79 58 194	#4F3AC2
16.7%	16.7% #4A54C9	RGB 74 84 201	#4A54C9
33.3%	33.3% #5C80D0	RGB 92 128 208	#5C80D0
50.0%	50.0% #6FA7D7	RGB 111 167 215	#6FA7D7
66.7%	66.7% #83C9DE	RGB 131 201 222	#83C9DE
83.3%	83.3% #98E5E4	RGB 152 229 228	#98E5E4
100.0%	100.0% #AFECDD	RGB 175 236 221	#AFECDD

#4F3AC2 #4A54C9 #5C80D0 #6FA7D7 #83C9DE #98E5E4 #AFECDD

#503AC2 - #6FA7D7 - #AFECDD

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4F3AC2 0%, #6FA7D7 50%, #AFECDD 100%);
    background: -webkit-linear-gradient(top, #4F3AC2 0%, #6FA7D7 50%, #AFECDD 100%);
    background: linear-gradient(to bottom, #4F3AC2 0%, #6FA7D7 50%, #AFECDD 100%);
}
</style>