#EC4A54 - #FFA55E | 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 #EC4A54 to #FFA55E

#EC4A54 #FFA55E

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

#EC4A54 - #FFA55E | 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 #EC4A54 as 0% and #FFA55E as 100%.

0.0%	0.0% #EC4A54	RGB 236 74 84	#EC4A54
16.7%	16.7% #EF5955	RGB 239 89 85	#EF5955
33.3%	33.3% #F26857	RGB 242 104 87	#F26857
50.0%	50.0% #F57759	RGB 245 119 89	#F57759
66.7%	66.7% #F8865A	RGB 248 134 90	#F8865A
83.3%	83.3% #FB955C	RGB 251 149 92	#FB955C
100.0%	100.0% #FFA55E	RGB 255 165 94	#FFA55E

#EC4A54 #EF5955 #F26857 #F57759 #F8865A #FB955C #FFA55E

#EC4A54 - #FFA55E

HSV Blend

#EC4A54 - #FFA55E | 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 #EC4A54 as 0% and #FFA55E as 100%.

0.0%	0.0% #EC4953	RGB 236 73 83	#EC4953
16.7%	16.7% #EF504D	RGB 239 80 77	#EF504D
33.3%	33.3% #F26150	RGB 242 97 80	#F26150
50.0%	50.0% #F57253	RGB 245 114 83	#F57253
66.7%	66.7% #F88357	RGB 248 131 87	#F88357
83.3%	83.3% #FB945A	RGB 251 148 90	#FB945A
100.0%	100.0% #FFA55E	RGB 255 165 94	#FFA55E

#EC4953 #EF504D #F26150 #F57253 #F88357 #FB945A #FFA55E

#EC4A54 - #F57253 - #FFA55E

CSS codes

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

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