Sage
#87ae73
Muted sage-green for calmer section headers
About Sage
Sage sits somewhere between spring leaf and soft clay. On my screen it reads calmer and more muted than Lush Fields, with less sun-warmed pop and a lower-contrast "spread" that keeps it from feeling pushy. Compared to Green Tea Mochi, it's a step richer and more balanced, not milky or misty. And next to Garden of Eden, it gives up some of that brighter leaf juice and leans a touch cooler in the midtones, so it feels composed rather than freshly rinsed.
I use it when I need green that still feels alive but won't shout, especially in product UI for compliance and settings where the status needs to feel steady. It's a good fit for dashboards and finance apps too, but I reach for it more when the rest of the palette is already warm. Also great for map layers, sustainability tables, and content tags that sit over off-whites without taking over.
Quirk: keep an eye on saturated yellows nearby, because Sage's cool-lean can pull the whole row slightly grayer unless you anchor with warmer text or cream backgrounds.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.