#FFCA2C - #FFAF7B | 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 #FFCA2C to #FFAF7B

#FFCA2C #FFAF7B

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

#FFCA2C - #FFAF7B | 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 #FFCA2C as 0% and #FFAF7B as 100%.

0.0%	0.0% #FFCA2C	RGB 255 202 44	#FFCA2C
16.7%	16.7% #FFC539	RGB 255 197 57	#FFC539
33.3%	33.3% #FFC146	RGB 255 193 70	#FFC146
50.0%	50.0% #FFBC53	RGB 255 188 83	#FFBC53
66.7%	66.7% #FFB860	RGB 255 184 96	#FFB860
83.3%	83.3% #FFB36D	RGB 255 179 109	#FFB36D
100.0%	100.0% #FFAF7B	RGB 255 175 123	#FFAF7B

#FFCA2C #FFC539 #FFC146 #FFBC53 #FFB860 #FFB36D #FFAF7B

#FFCA2C - #FFAF7B

HSV Blend

#FFCA2C - #FFAF7B | 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 #FFCA2C as 0% and #FFAF7B as 100%.

0.0%	0.0% #FFCA2B	RGB 255 202 43	#FFCA2B
16.7%	16.7% #FFC139	RGB 255 193 57	#FFC139
33.3%	33.3% #FFBA46	RGB 255 186 70	#FFBA46
50.0%	50.0% #FFB553	RGB 255 181 83	#FFB553
66.7%	66.7% #FFB160	RGB 255 177 96	#FFB160
83.3%	83.3% #FFAF6D	RGB 255 175 109	#FFAF6D
100.0%	100.0% #FFAF7B	RGB 255 175 123	#FFAF7B

#FFCA2B #FFC139 #FFBA46 #FFB553 #FFB160 #FFAF6D #FFAF7B

#FFCA2C - #FFB553 - #FFAF7B

CSS codes

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

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