What are the hex codes in the Bakery Mustard & Hunter Green palette?

The Bakery Mustard & Hunter Green color palette consists of Hunter Green #2A6C00, Fern #646E00, Jade #009E66, Mustard #D2B01B.

How should I use the Bakery Mustard & Hunter Green palette on a website?

Use Mustard #D2B01B as the background, Hunter Green #2A6C00 for text, Fern #646E00 for buttons and links, and Jade #009E66 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Bakery Mustard & Hunter Green have enough contrast for text?

The highest-contrast pair is #2A6C00 on #D2B01B with a ratio of 3.07:1, which passes WCAG AA for large text only.

#2A6C00Hunter Green

#646E00Fern

#009E66Jade

#D2B01BMustard

Bakery Mustard & Hunter Green color palette

Food Green Yellow

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Hunter Green	`#2A6C00`	`rgb(42, 108, 0)`	`hsl(97, 100%, 21%)`	`oklch(47.0% 0.145 138)`
Fern	`#646E00`	`rgb(100, 110, 0)`	`hsl(65, 100%, 22%)`	`oklch(51.2% 0.117 116)`
Jade	`#009E66`	`rgb(0, 158, 102)`	`hsl(159, 100%, 31%)`	`oklch(61.7% 0.141 159)`
Mustard	`#D2B01B`	`rgb(210, 176, 27)`	`hsl(49, 77%, 46%)`	`oklch(76.5% 0.152 94)`

Why it works and how to use it

Bakery Mustard & Hunter Green is a vivid dark, split color palette tagged food, green, yellow. The hues span about 110°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Fern takes the lead while the rest support. Lightness runs from 21% to 46%. Well suited to menus and packaging.

Background: Mustard (#D2B01B) is the lightest color, so it belongs on large surfaces.
Text: Hunter Green (#2A6C00) on #D2B01B gives 3.07:1, enough for large headings only.
Primary: Fern (#646E00) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Jade (#009E66) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Bakery Mustard & 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

#2A6C00

#646E00

#009E66

#D2B01B

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
`#2A6C00` on `#D2B01B`	Aa	3.07:1	AA large only
`#646E00` on `#D2B01B`	Aa	2.64:1	Fail
`#2A6C00` on `#009E66`	Aa	1.88:1	Fail
`#009E66` on `#D2B01B`	Aa	1.64:1	Fail
`#646E00` on `#009E66`	Aa	1.61:1	Fail
`#2A6C00` on `#646E00`	Aa	1.16:1	Fail

:root {
  --hunter-green: #2A6C00;
  --fern: #646E00;
  --jade: #009E66;
  --mustard: #D2B01B;
}

$hunter-green: #2A6C00;
$fern: #646E00;
$jade: #009E66;
$mustard: #D2B01B;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'hunter-green': '#2A6C00',
        'fern': '#646E00',
        'jade': '#009E66',
        'mustard': '#D2B01B',
      },
    },
  },
};

{
  "name": "Bakery Mustard & Hunter Green",
  "colors": [
    "#2A6C00",
    "#646E00",
    "#009E66",
    "#D2B01B"
  ]
}

background: linear-gradient(135deg, #2A6C00, #646E00, #009E66, #D2B01B);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-01-22 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood