#3A5E4D - #5DCF97 | 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 #3A5E4D to #5DCF97

#3A5E4D #5DCF97

Calculate the color between two colors, #3A5E4D and #5DCF97. 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)

#3A5E4D - #5DCF97 | 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 #3A5E4D as 0% and #5DCF97 as 100%.

0.0%	0.0% #3A5E4D	RGB 58 94 77	#3A5E4D
16.7%	16.7% #3F7059	RGB 63 112 89	#3F7059
33.3%	33.3% #458365	RGB 69 131 101	#458365
50.0%	50.0% #4B9672	RGB 75 150 114	#4B9672
66.7%	66.7% #51A97E	RGB 81 169 126	#51A97E
83.3%	83.3% #57BC8A	RGB 87 188 138	#57BC8A
100.0%	100.0% #5DCF97	RGB 93 207 151	#5DCF97

#3A5E4D #3F7059 #458365 #4B9672 #51A97E #57BC8A #5DCF97

#3A5E4D - #5DCF97

HSV Blend

#3A5E4D - #5DCF97 | 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 #3A5E4D as 0% and #5DCF97 as 100%.

0.0%	0.0% #3A5E4D	RGB 58 94 77	#3A5E4D
16.7%	16.7% #42705A	RGB 66 112 90	#42705A
33.3%	33.3% #498368	RGB 73 131 104	#498368
50.0%	50.0% #509674	RGB 80 150 116	#509674
66.7%	66.7% #55A980	RGB 85 169 128	#55A980
83.3%	83.3% #59BC8C	RGB 89 188 140	#59BC8C
100.0%	100.0% #5DCF97	RGB 93 207 151	#5DCF97

#3A5E4D #42705A #498368 #509674 #55A980 #59BC8C #5DCF97

#3A5E4D - #509674 - #5DCF97

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3A5E4D 0%, #509674 50%, #5DCF97 100%);
    background: -webkit-linear-gradient(top, #3A5E4D 0%, #509674 50%, #5DCF97 100%);
    background: linear-gradient(to bottom, #3A5E4D 0%, #509674 50%, #5DCF97 100%);
}
</style>