Grasshopper
#77824a
Balanced moss green, warmer and lighter than olives
About Grasshopper
Grasshopper feels like trimmed lawn clippings in late afternoon light, not deep evergreen and not dusty olive. It's a medium-light green with a steady, slightly muted saturation, so it reads clean and usable instead of lush. Compared to Green Commando, it's lighter and less "tool-cabinet" and doesn't lean as gray or coolly restrained. Compared to Beyond the Pines, it stays up in the midtones, so you don't get that dusk-heavy, blue-gray depth.
For UI, I use it when the layout needs to feel fresh but still controlled, especially on product settings pages for landscaping, agriculture, and health or wellness platforms. It also works well for dashboards and content sidebars when you want panels to feel active without turning into-chartreuse noise like Iguana. Pair it with crisp neutrals and off-white UI chrome, then anchor charts with charcoal.
Quirk: it can tip a bit earthy next to strong browns, so keep "brown partners" muted if you're after that trimmed, modern feel.
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.