#FFF4A8 - #ECCF4F | 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 #FFF4A8 to #ECCF4F

#FFF4A8 #ECCF4F

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

#FFF4A8 - #ECCF4F | 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 #FFF4A8 as 0% and #ECCF4F as 100%.

0.0%	0.0% #FFF4A8	RGB 255 244 168	#FFF4A8
16.7%	16.7% #FBED99	RGB 251 237 153	#FBED99
33.3%	33.3% #F8E78A	RGB 248 231 138	#F8E78A
50.0%	50.0% #F5E17B	RGB 245 225 123	#F5E17B
66.7%	66.7% #F2DB6C	RGB 242 219 108	#F2DB6C
83.3%	83.3% #EFD55D	RGB 239 213 93	#EFD55D
100.0%	100.0% #ECCF4F	RGB 236 207 79	#ECCF4F

#FFF4A8 #FBED99 #F8E78A #F5E17B #F2DB6C #EFD55D #ECCF4F

#FFF4A8 - #ECCF4F

HSV Blend

#FFF4A8 - #ECCF4F | 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 #FFF4A8 as 0% and #ECCF4F as 100%.

0.0%	0.0% #FFF4A8	RGB 255 244 168	#FFF4A8
16.7%	16.7% #FBEE98	RGB 251 238 152	#FBEE98
33.3%	33.3% #F8E888	RGB 248 232 136	#F8E888
50.0%	50.0% #F5E279	RGB 245 226 121	#F5E279
66.7%	66.7% #F2DC6B	RGB 242 220 107	#F2DC6B
83.3%	83.3% #EFD55C	RGB 239 213 92	#EFD55C
100.0%	100.0% #ECCF4F	RGB 236 207 79	#ECCF4F

#FFF4A8 #FBEE98 #F8E888 #F5E279 #F2DC6B #EFD55C #ECCF4F

#FFF4A8 - #F5E279 - #ECCF4F

CSS codes

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

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