#AF3C62 - #FA8C77 | 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 #AF3C62 to #FA8C77

#AF3C62 #FA8C77

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

#AF3C62 - #FA8C77 | 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 #AF3C62 as 0% and #FA8C77 as 100%.

0.0%	0.0% #AF3C62	RGB 175 60 98	#AF3C62
16.7%	16.7% #BB4965	RGB 187 73 101	#BB4965
33.3%	33.3% #C85669	RGB 200 86 105	#C85669
50.0%	50.0% #D4646C	RGB 212 100 108	#D4646C
66.7%	66.7% #E17170	RGB 225 113 112	#E17170
83.3%	83.3% #ED7E73	RGB 237 126 115	#ED7E73
100.0%	100.0% #FA8C77	RGB 250 140 119	#FA8C77

#AF3C62 #BB4965 #C85669 #D4646C #E17170 #ED7E73 #FA8C77

#AF3C62 - #FA8C77

HSV Blend

#AF3C62 - #FA8C77 | 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 #AF3C62 as 0% and #FA8C77 as 100%.

0.0%	0.0% #AF3C62	RGB 175 60 98	#AF3C62
16.7%	16.7% #BB4462	RGB 187 68 98	#BB4462
33.3%	33.3% #C84D61	RGB 200 77 97	#C84D61
50.0%	50.0% #D45761	RGB 212 87 97	#D45761
66.7%	66.7% #E16161	RGB 225 97 97	#E16161
83.3%	83.3% #ED756B	RGB 237 117 107	#ED756B
100.0%	100.0% #FA8C77	RGB 250 140 119	#FA8C77

#AF3C62 #BB4462 #C84D61 #D45761 #E16161 #ED756B #FA8C77

#AF3C62 - #D45761 - #FA8C77

CSS codes

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

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