#FFCC64 - #F0F193 | 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 #FFCC64 to #F0F193

#FFCC64 #F0F193

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

#FFCC64 - #F0F193 | 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 #FFCC64 as 0% and #F0F193 as 100%.

0.0%	0.0% #FFCC64	RGB 255 204 100	#FFCC64
16.7%	16.7% #FCD26B	RGB 252 210 107	#FCD26B
33.3%	33.3% #FAD873	RGB 250 216 115	#FAD873
50.0%	50.0% #F7DE7B	RGB 247 222 123	#F7DE7B
66.7%	66.7% #F5E483	RGB 245 228 131	#F5E483
83.3%	83.3% #F2EA8B	RGB 242 234 139	#F2EA8B
100.0%	100.0% #F0F193	RGB 240 241 147	#F0F193

#FFCC64 #FCD26B #FAD873 #F7DE7B #F5E483 #F2EA8B #F0F193

#FFCC64 - #F0F193

HSV Blend

#FFCC64 - #F0F193 | 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 #FFCC64 as 0% and #F0F193 as 100%.

0.0%	0.0% #FFCC64	RGB 255 204 100	#FFCC64
16.7%	16.7% #FCD56C	RGB 252 213 108	#FCD56C
33.3%	33.3% #FADD74	RGB 250 221 116	#FADD74
50.0%	50.0% #F8E47C	RGB 248 228 124	#F8E47C
66.7%	66.7% #F5EA84	RGB 245 234 132	#F5EA84
83.3%	83.3% #F3EE8B	RGB 243 238 139	#F3EE8B
100.0%	100.0% #F0F193	RGB 240 241 147	#F0F193

#FFCC64 #FCD56C #FADD74 #F8E47C #F5EA84 #F3EE8B #F0F193

#FFCC64 - #F8E47C - #F0F193

CSS codes

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

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