#F4A460 - #F5E286 | 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 #F4A460 to #F5E286

#F4A460 #F5E286

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

#F4A460 - #F5E286 | 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 #F4A460 as 0% and #F5E286 as 100%.

0.0%	0.0% #F4A460	RGB 244 164 96	#F4A460
16.7%	16.7% #F4AE66	RGB 244 174 102	#F4AE66
33.3%	33.3% #F4B86C	RGB 244 184 108	#F4B86C
50.0%	50.0% #F4C373	RGB 244 195 115	#F4C373
66.7%	66.7% #F4CD79	RGB 244 205 121	#F4CD79
83.3%	83.3% #F4D77F	RGB 244 215 127	#F4D77F
100.0%	100.0% #F5E286	RGB 245 226 134	#F5E286

#F4A460 #F4AE66 #F4B86C #F4C373 #F4CD79 #F4D77F #F5E286

#F4A460 - #F5E286

HSV Blend

#F4A460 - #F5E286 | 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 #F4A460 as 0% and #F5E286 as 100%.

0.0%	0.0% #F4A460	RGB 244 164 96	#F4A460
16.7%	16.7% #F4B066	RGB 244 176 102	#F4B066
33.3%	33.3% #F4BB6C	RGB 244 187 108	#F4BB6C
50.0%	50.0% #F4C672	RGB 244 198 114	#F4C672
66.7%	66.7% #F4D079	RGB 244 208 121	#F4D079
83.3%	83.3% #F4D97F	RGB 244 217 127	#F4D97F
100.0%	100.0% #F5E286	RGB 245 226 134	#F5E286

#F4A460 #F4B066 #F4BB6C #F4C672 #F4D079 #F4D97F #F5E286

#F4A460 - #F4C672 - #F5E286

CSS codes

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

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