#CCC02C - #FFE557 | 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 #CCC02C to #FFE557

#CCC02C #FFE557

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

#CCC02C - #FFE557 | 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 #CCC02C as 0% and #FFE557 as 100%.

0.0%	0.0% #CCC02C	RGB 204 192 44	#CCC02C
16.7%	16.7% #D4C633	RGB 212 198 51	#D4C633
33.3%	33.3% #DDCC3A	RGB 221 204 58	#DDCC3A
50.0%	50.0% #E5D241	RGB 229 210 65	#E5D241
66.7%	66.7% #EED848	RGB 238 216 72	#EED848
83.3%	83.3% #F6DE4F	RGB 246 222 79	#F6DE4F
100.0%	100.0% #FFE557	RGB 255 229 87	#FFE557

#CCC02C #D4C633 #DDCC3A #E5D241 #EED848 #F6DE4F #FFE557

#CCC02C - #FFE557

HSV Blend

#CCC02C - #FFE557 | 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 #CCC02C as 0% and #FFE557 as 100%.

0.0%	0.0% #CCC02C	RGB 204 192 44	#CCC02C
16.7%	16.7% #D4C632	RGB 212 198 50	#D4C632
33.3%	33.3% #DDCC38	RGB 221 204 56	#DDCC38
50.0%	50.0% #E5D23F	RGB 229 210 63	#E5D23F
66.7%	66.7% #EED847	RGB 238 216 71	#EED847
83.3%	83.3% #F6DE4E	RGB 246 222 78	#F6DE4E
100.0%	100.0% #FFE557	RGB 255 229 87	#FFE557

#CCC02C #D4C632 #DDCC38 #E5D23F #EED847 #F6DE4E #FFE557

#CCC02C - #E5D23F - #FFE557

CSS codes

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

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