#ADD3C0 - #313C36 | 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 #ADD3C0 to #313C36

#ADD3C0 #313C36

Calculate the color between two colors, #ADD3C0 and #313C36. 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)

#ADD3C0 - #313C36 | 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 #ADD3C0 as 0% and #313C36 as 100%.

0.0%	0.0% #ADD3C0	RGB 173 211 192	#ADD3C0
16.7%	16.7% #98B9A9	RGB 152 185 169	#98B9A9
33.3%	33.3% #83A092	RGB 131 160 146	#83A092
50.0%	50.0% #6F877B	RGB 111 135 123	#6F877B
66.7%	66.7% #5A6E64	RGB 90 110 100	#5A6E64
83.3%	83.3% #45554D	RGB 69 85 77	#45554D
100.0%	100.0% #313C36	RGB 49 60 54	#313C36

#ADD3C0 #98B9A9 #83A092 #6F877B #5A6E64 #45554D #313C36

#ADD3C0 - #313C36

HSV Blend

#ADD3C0 - #313C36 | 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 #ADD3C0 as 0% and #313C36 as 100%.

0.0%	0.0% #ADD3C0	RGB 173 211 192	#ADD3C0
16.7%	16.7% #98B9A8	RGB 152 185 168	#98B9A8
33.3%	33.3% #83A091	RGB 131 160 145	#83A091
50.0%	50.0% #6E877A	RGB 110 135 122	#6E877A
66.7%	66.7% #5A6E63	RGB 90 110 99	#5A6E63
83.3%	83.3% #45554C	RGB 69 85 76	#45554C
100.0%	100.0% #313C36	RGB 49 60 54	#313C36

#ADD3C0 #98B9A8 #83A091 #6E877A #5A6E63 #45554C #313C36

#ADD3C0 - #6E877A - #313C36

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ADD3C0 0%, #6E877A 50%, #313C36 100%);
    background: -webkit-linear-gradient(top, #ADD3C0 0%, #6E877A 50%, #313C36 100%);
    background: linear-gradient(to bottom, #ADD3C0 0%, #6E877A 50%, #313C36 100%);
}
</style>