Grass
#5cac2d
Medium, cool, saturated green for balanced highlights
About Grass
Grass looks like fresh field growth under bright sun, but it's not as clean and "paper-leaf" as Green Envy. It also doesn't sink as deep and dense as Botanical Garden. This one sits in the middle: a steadier mid-light green with more saturation than Green Envy yet less earthy weight than Botanical Garden. The vibe is calmer than Extra Life too, because it avoids that punchy, UI-notice brightness.
I use it when the UI needs "active and healthy" without feeling like an interrupt. Think crop monitoring screens, plant-care checklists, fleet maintenance status, and map overlays for work zones. It's great for asset status badges and step-by-step forms where the green should feel certain, not urgent. It also holds up on light backgrounds for labels and chips, especially when the rest of the interface is using greys and muted blues.
Pair it with crisp off-whites or cool grays so it reads focused instead of grassy-muddy. If you put it next to yellower greens, it'll look cooler and more natural by comparison, which is usually what you want.
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.