#FFD99B - #20537B | 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 #FFD99B to #20537B

#FFD99B #20537B

Calculate the color between two colors, #FFD99B and #20537B. 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)

#FFD99B - #20537B | 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 #FFD99B as 0% and #20537B as 100%.

0.0%	0.0% #FFD99B	RGB 255 217 155	#FFD99B
16.7%	16.7% #D9C295	RGB 217 194 149	#D9C295
33.3%	33.3% #B4AC90	RGB 180 172 144	#B4AC90
50.0%	50.0% #8F968B	RGB 143 150 139	#8F968B
66.7%	66.7% #6A7F85	RGB 106 127 133	#6A7F85
83.3%	83.3% #456980	RGB 69 105 128	#456980
100.0%	100.0% #20537B	RGB 32 83 123	#20537B

#FFD99B #D9C295 #B4AC90 #8F968B #6A7F85 #456980 #20537B

#FFD99B - #20537B

HSV Blend

#FFD99B - #20537B | 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 #FFD99B as 0% and #20537B as 100%.

0.0%	0.0% #FFD99B	RGB 255 217 155	#FFD99B
16.7%	16.7% #DFE980	RGB 223 233 128	#DFE980
33.3%	33.3% #96D367	RGB 150 211 103	#96D367
50.0%	50.0% #52BD55	RGB 82 189 85	#52BD55
66.7%	66.7% #3EA772	RGB 62 167 114	#3EA772
83.3%	83.3% #2E918D	RGB 46 145 141	#2E918D
100.0%	100.0% #20537B	RGB 32 83 123	#20537B

#FFD99B #DFE980 #96D367 #52BD55 #3EA772 #2E918D #20537B

#FFD99B - #52BD55 - #20537B

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #FFD99B 0%, #52BD55 50%, #20537B 100%);
    background: -webkit-linear-gradient(top, #FFD99B 0%, #52BD55 50%, #20537B 100%);
    background: linear-gradient(to bottom, #FFD99B 0%, #52BD55 50%, #20537B 100%);
}
</style>