Verdant Leaf
#817c4a
Muted mid-olive with steadier, cooler undertone for UI charts
About Verdant Leaf
On my screen, Verdant Leaf looks like a leaf that's been pressed just a little too dry: distinctly green, but not loud. It's more light and more mossy than Bay Leaf's cooler, grayer olive, so it never feels halfway to brown. Compared with Capers, it backs off the extra saturation and stays calmer, more settled, with a yellow-leaning warmth that reads as "grown" rather than "tinted."
I reach for it when you want a background that carries craft energy without turning into the main character. It's great for food packaging and spice brand systems where the type needs clean breathing room, and for product detail pages in lifestyle and home goods. In UI, it shows up nicely behind tables, cards, and settings surfaces, especially in dashboards and finance apps-adjacent product shells that need a warm green instead of an obvious plant palette.
One quirk: because it's lighter than the bay-and-capers neighbors, Verdant Leaf can look a touch pastel next to cream. If that happens, nudge contrast with a deeper text or divider tone and it snaps back into place.
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.