#AF4BA0 - #F4ABC6 | 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 #AF4BA0 to #F4ABC6

#AF4BA0 #F4ABC6

Calculate the color between two colors, #AF4BA0 and #F4ABC6. 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)

#AF4BA0 - #F4ABC6 | 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 #AF4BA0 as 0% and #F4ABC6 as 100%.

0.0%	0.0% #AF4BA0	RGB 175 75 160	#AF4BA0
16.7%	16.7% #BA5BA6	RGB 186 91 166	#BA5BA6
33.3%	33.3% #C66BAC	RGB 198 107 172	#C66BAC
50.0%	50.0% #D17BB3	RGB 209 123 179	#D17BB3
66.7%	66.7% #DD8BB9	RGB 221 139 185	#DD8BB9
83.3%	83.3% #E89BBF	RGB 232 155 191	#E89BBF
100.0%	100.0% #F4ABC6	RGB 244 171 198	#F4ABC6

#AF4BA0 #BA5BA6 #C66BAC #D17BB3 #DD8BB9 #E89BBF #F4ABC6

#AF4BA0 - #F4ABC6

HSV Blend

#AF4BA0 - #F4ABC6 | 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 #AF4BA0 as 0% and #F4ABC6 as 100%.

0.0%	0.0% #AF4B9F	RGB 175 75 159	#AF4B9F
16.7%	16.7% #BA58A3	RGB 186 88 163	#BA58A3
33.3%	33.3% #C666A8	RGB 198 102 168	#C666A8
50.0%	50.0% #D176AD	RGB 209 118 173	#D176AD
66.7%	66.7% #DD86B4	RGB 221 134 180	#DD86B4
83.3%	83.3% #E898BC	RGB 232 152 188	#E898BC
100.0%	100.0% #F4ABC6	RGB 244 171 198	#F4ABC6

#AF4B9F #BA58A3 #C666A8 #D176AD #DD86B4 #E898BC #F4ABC6

#AF4BA0 - #D176AD - #F4ABC6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #AF4B9F 0%, #D176AD 50%, #F4ABC6 100%);
    background: -webkit-linear-gradient(top, #AF4B9F 0%, #D176AD 50%, #F4ABC6 100%);
    background: linear-gradient(to bottom, #AF4B9F 0%, #D176AD 50%, #F4ABC6 100%);
}
</style>