What are the hex codes in the Grove Saffron & Hunter Green palette?

The Grove Saffron & Hunter Green color palette consists of Hunter Green #404F1C, Spruce #00564B, Moss #78A484, Saffron #D8C46F.

How should I use the Grove Saffron & Hunter Green palette on a website?

Use Saffron #D8C46F as the background, Hunter Green #404F1C for text, Spruce #00564B for buttons and links, and Moss #78A484 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Hunter Green on Saffron at 5.12:1.

Which colors in Grove Saffron & Hunter Green have enough contrast for text?

The highest-contrast pair is #404F1C on #D8C46F with a ratio of 5.12:1, which passes WCAG AA for normal text.

#404F1CHunter Green

#00564BSpruce

#78A484Moss

#D8C46FSaffron

Grove Saffron & Hunter Green color palette

Nature Green Yellow

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Hunter Green	`#404F1C`	`rgb(64, 79, 28)`	`hsl(78, 48%, 21%)`	`oklch(40.2% 0.077 124)`
Spruce	`#00564B`	`rgb(0, 86, 75)`	`hsl(172, 100%, 17%)`	`oklch(40.6% 0.074 180)`
Moss	`#78A484`	`rgb(120, 164, 132)`	`hsl(136, 19%, 56%)`	`oklch(67.8% 0.067 153)`
Saffron	`#D8C46F`	`rgb(216, 196, 111)`	`hsl(49, 57%, 64%)`	`oklch(81.9% 0.108 96)`

Why it works and how to use it

Grove Saffron & Hunter Green is a dark, split color palette tagged nature, green, yellow. The hues span about 123°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Spruce takes the lead while the rest support. Lightness runs from 17% to 64%. Well suited to wellness, organic and outdoor brands.

Background: Saffron (#D8C46F) is the lightest color, so it belongs on large surfaces.
Text: Hunter Green (#404F1C) on #D8C46F gives 5.12:1, passing WCAG AA.
Primary: Spruce (#00564B) is the most saturated mid-tone; use it for buttons and links (4.95:1 against the background, fine for UI elements).
Accent: Moss (#78A484) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Hunter Green on Saffron at 5.12:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Grove Saffron & Hunter Green

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#404F1C

#00564B

#78A484

#D8C46F

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#404F1C` on `#D8C46F`	Aa	5.12:1	AA
`#00564B` on `#D8C46F`	Aa	4.95:1	AA
`#404F1C` on `#78A484`	Aa	3.16:1	AA large only
`#00564B` on `#78A484`	Aa	3.06:1	AA large only
`#78A484` on `#D8C46F`	Aa	1.62:1	Fail
`#404F1C` on `#00564B`	Aa	1.03:1	Fail

:root {
  --hunter-green: #404F1C;
  --spruce: #00564B;
  --moss: #78A484;
  --saffron: #D8C46F;
}

$hunter-green: #404F1C;
$spruce: #00564B;
$moss: #78A484;
$saffron: #D8C46F;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'hunter-green': '#404F1C',
        'spruce': '#00564B',
        'moss': '#78A484',
        'saffron': '#D8C46F',
      },
    },
  },
};

{
  "name": "Grove Saffron & Hunter Green",
  "colors": [
    "#404F1C",
    "#00564B",
    "#78A484",
    "#D8C46F"
  ]
}

background: linear-gradient(135deg, #404F1C, #00564B, #78A484, #D8C46F);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-04-24 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood