#F74D4D - #FFAF64 | 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 #F74D4D to #FFAF64

#F74D4D #FFAF64

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

#F74D4D - #FFAF64 | 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 #F74D4D as 0% and #FFAF64 as 100%.

0.0%	0.0% #F74D4D	RGB 247 77 77	#F74D4D
16.7%	16.7% #F85D50	RGB 248 93 80	#F85D50
33.3%	33.3% #F96D54	RGB 249 109 84	#F96D54
50.0%	50.0% #FB7E58	RGB 251 126 88	#FB7E58
66.7%	66.7% #FC8E5C	RGB 252 142 92	#FC8E5C
83.3%	83.3% #FD9E60	RGB 253 158 96	#FD9E60
100.0%	100.0% #FFAF64	RGB 255 175 100	#FFAF64

#F74D4D #F85D50 #F96D54 #FB7E58 #FC8E5C #FD9E60 #FFAF64

#F74D4D - #FFAF64

HSV Blend

#F74D4D - #FFAF64 | 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 #F74D4D as 0% and #FFAF64 as 100%.

0.0%	0.0% #F74D4D	RGB 247 77 77	#F74D4D
16.7%	16.7% #F85E50	RGB 248 94 80	#F85E50
33.3%	33.3% #F96F54	RGB 249 111 84	#F96F54
50.0%	50.0% #FB7F58	RGB 251 127 88	#FB7F58
66.7%	66.7% #FC8F5C	RGB 252 143 92	#FC8F5C
83.3%	83.3% #FD9F60	RGB 253 159 96	#FD9F60
100.0%	100.0% #FFAF64	RGB 255 175 100	#FFAF64

#F74D4D #F85E50 #F96F54 #FB7F58 #FC8F5C #FD9F60 #FFAF64

#F74D4D - #FB7F58 - #FFAF64

CSS codes

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

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