Verdant Leaf

#817c4a

Muted mid-olive with steadier, cooler undertone for UI charts

Save
Share

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 's cooler, grayer olive, so it never feels halfway to brown. Compared with , 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- 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
4.27:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.92:1FailAA Large

On Gray 900 #18181b

Aa
4.15:1FailAA Large

On Black #000000

Aa
4.92:1AAAAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#86793d
#897a3e
#787b54
#7f7755

Create a gradient with Verdant Leaf

Open the generator with this color pre-loaded.

Start creating