#336F5E - #97BA7E | 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 #336F5E to #97BA7E

#336F5E #97BA7E

Calculate the color between two colors, #336F5E and #97BA7E. 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)

#336F5E - #97BA7E | 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 #336F5E as 0% and #97BA7E as 100%.

0.0%	0.0% #336F5E	RGB 51 111 94	#336F5E
16.7%	16.7% #437B63	RGB 67 123 99	#437B63
33.3%	33.3% #548868	RGB 84 136 104	#548868
50.0%	50.0% #65946E	RGB 101 148 110	#65946E
66.7%	66.7% #75A173	RGB 117 161 115	#75A173
83.3%	83.3% #86AD78	RGB 134 173 120	#86AD78
100.0%	100.0% #97BA7E	RGB 151 186 126	#97BA7E

#336F5E #437B63 #548868 #65946E #75A173 #86AD78 #97BA7E

#336F5E - #97BA7E

HSV Blend

#336F5E - #97BA7E | 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 #336F5E as 0% and #97BA7E as 100%.

0.0%	0.0% #336F5E	RGB 51 111 94	#336F5E
16.7%	16.7% #3D7B5E	RGB 61 123 94	#3D7B5E
33.3%	33.3% #48885D	RGB 72 136 93	#48885D
50.0%	50.0% #54945E	RGB 84 148 94	#54945E
66.7%	66.7% #63A161	RGB 99 161 97	#63A161
83.3%	83.3% #7DAD6F	RGB 125 173 111	#7DAD6F
100.0%	100.0% #97BA7E	RGB 151 186 126	#97BA7E

#336F5E #3D7B5E #48885D #54945E #63A161 #7DAD6F #97BA7E

#336F5E - #54945E - #97BA7E

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #336F5E 0%, #54945E 50%, #97BA7E 100%);
    background: -webkit-linear-gradient(top, #336F5E 0%, #54945E 50%, #97BA7E 100%);
    background: linear-gradient(to bottom, #336F5E 0%, #54945E 50%, #97BA7E 100%);
}
</style>