#EF663C - #FFCC4B | 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 #EF663C to #FFCC4B

#EF663C #FFCC4B

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

#EF663C - #FFCC4B | 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 #EF663C as 0% and #FFCC4B as 100%.

0.0%	0.0% #EF663C	RGB 239 102 60	#EF663C
16.7%	16.7% #F1773E	RGB 241 119 62	#F1773E
33.3%	33.3% #F48841	RGB 244 136 65	#F48841
50.0%	50.0% #F79943	RGB 247 153 67	#F79943
66.7%	66.7% #F9AA46	RGB 249 170 70	#F9AA46
83.3%	83.3% #FCBB48	RGB 252 187 72	#FCBB48
100.0%	100.0% #FFCC4B	RGB 255 204 75	#FFCC4B

#EF663C #F1773E #F48841 #F79943 #F9AA46 #FCBB48 #FFCC4B

#EF663C - #FFCC4B

HSV Blend

#EF663C - #FFCC4B | 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 #EF663C as 0% and #FFCC4B as 100%.

0.0%	0.0% #EF663C	RGB 239 102 60	#EF663C
16.7%	16.7% #F1763E	RGB 241 118 62	#F1763E
33.3%	33.3% #F48740	RGB 244 135 64	#F48740
50.0%	50.0% #F79843	RGB 247 152 67	#F79843
66.7%	66.7% #F9A945	RGB 249 169 69	#F9A945
83.3%	83.3% #FCBA48	RGB 252 186 72	#FCBA48
100.0%	100.0% #FFCC4B	RGB 255 204 75	#FFCC4B

#EF663C #F1763E #F48740 #F79843 #F9A945 #FCBA48 #FFCC4B

#EF663C - #F79843 - #FFCC4B

CSS codes

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

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