Savannah Grass
#babc72
Sunny, straw-tinted yellow-green for grounded UI backgrounds
About Savannah Grass
Savannah Grass looks like late-afternoon light on dry green blades: green, but with a chalky, sun-bleached calm. Compared to Kiss a Frog, it's not as clean and leaf-bright, and compared to Nile it feels less sandy and more muted overall. It sits in that sweet spot that reads green first, gold second, with a softer, slightly dusty undertone.
For UI, I use it as a background tint when you want structure without slipping into the mossy olive direction of Motherland. It works especially well in publishing workflows, like the staging panels for copy edits and the subtler sections in editorial admin. I also like it for product and operations screens where you need status and metadata areas that don't fight photos, or sit gently behind charts in retail and logistics dashboards.
Quirk: because the saturation is dialed back, it can feel flat next to crisp, high-contrast accents. Pair it with a sharper dark text or a slightly deeper green border so the hierarchy holds.
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.
