#336B6B - #8CB486 | 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 #336B6B to #8CB486

#336B6B #8CB486

Calculate the color between two colors, #336B6B and #8CB486. 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)

#336B6B - #8CB486 | 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 #336B6B as 0% and #8CB486 as 100%.

0.0%	0.0% #336B6B	RGB 51 107 107	#336B6B
16.7%	16.7% #41776F	RGB 65 119 111	#41776F
33.3%	33.3% #508374	RGB 80 131 116	#508374
50.0%	50.0% #5F8F78	RGB 95 143 120	#5F8F78
66.7%	66.7% #6E9B7D	RGB 110 155 125	#6E9B7D
83.3%	83.3% #7DA781	RGB 125 167 129	#7DA781
100.0%	100.0% #8CB486	RGB 140 180 134	#8CB486

#336B6B #41776F #508374 #5F8F78 #6E9B7D #7DA781 #8CB486

#336B6B - #8CB486

HSV Blend

#336B6B - #8CB486 | 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 #336B6B as 0% and #8CB486 as 100%.

0.0%	0.0% #336B6B	RGB 51 107 107	#336B6B
16.7%	16.7% #3E776C	RGB 62 119 108	#3E776C
33.3%	33.3% #4A836D	RGB 74 131 109	#4A836D
50.0%	50.0% #578F6F	RGB 87 143 111	#578F6F
66.7%	66.7% #659B73	RGB 101 155 115	#659B73
83.3%	83.3% #75A778	RGB 117 167 120	#75A778
100.0%	100.0% #8CB486	RGB 140 180 134	#8CB486

#336B6B #3E776C #4A836D #578F6F #659B73 #75A778 #8CB486

#336B6B - #578F6F - #8CB486

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #336B6B 0%, #578F6F 50%, #8CB486 100%);
    background: -webkit-linear-gradient(top, #336B6B 0%, #578F6F 50%, #8CB486 100%);
    background: linear-gradient(to bottom, #336B6B 0%, #578F6F 50%, #8CB486 100%);
}
</style>