Backyard
#879877
Muted, cooler green-gray for grounding sections
About Backyard
Backyard is the green that sits too far back to read as designed and too forward to disappear. It's got enough gray in it to feel settled, but it lands warmer and less muted than Artichoke, with actual saturation underneath. The kind of color that works harder than it looks because it actually stays put instead of shifting toward beige depending on what's next to it.
Use it on product dashboards, internal tools, and design systems where you need green that feels natural without demanding attention. It's got more presence than Basil's deliberate restraint, but it won't compete the way Buckingham Gardens does. Type reads cleanly over it, logos don't disappear, and it pairs with warm grays, cream, or stone without requiring the right lighting conditions to make it work.
The real advantage here is consistency. It won't flatten next to cool grays or flatten next to warm ones. Test it at actual scale first, it's the kind of color that looks different in a swatch versus spread across a section of interface. Pair it with materials that have weight and it settles immediately.
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.