What are the hex codes in the Fern & Gunmetal Breeze palette?

The Fern & Gunmetal Breeze color palette consists of Fog #D7D5CE, Ash #BCC1B0, Fern #597455, Gunmetal #1A3423.

How should I use the Fern & Gunmetal Breeze palette on a website?

Use Fog #D7D5CE as the background, Gunmetal #1A3423 for text, Fern #597455 for buttons and links, and Ash #BCC1B0 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Fog on Gunmetal at 9.17:1.

Which colors in Fern & Gunmetal Breeze have enough contrast for text?

The highest-contrast pair is #D7D5CE on #1A3423 with a ratio of 9.17:1, which passes WCAG AA for normal text.

#D7D5CEFog

#BCC1B0Ash

#597455Fern

#1A3423Gunmetal

Fern & Gunmetal Breeze color palette

Muted Minimal Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Fog	`#D7D5CE`	`rgb(215, 213, 206)`	`hsl(47, 10%, 83%)`	`oklch(87.3% 0.010 94)`
Ash	`#BCC1B0`	`rgb(188, 193, 176)`	`hsl(78, 12%, 72%)`	`oklch(80.2% 0.024 120)`
Fern	`#597455`	`rgb(89, 116, 85)`	`hsl(112, 15%, 39%)`	`oklch(52.9% 0.057 141)`
Gunmetal	`#1A3423`	`rgb(26, 52, 35)`	`hsl(141, 33%, 15%)`	`oklch(29.8% 0.045 154)`

Why it works and how to use it

Fern & Gunmetal Breeze is a muted neutral-based color palette tagged muted, minimal, gray. Built almost entirely from neutrals, with Gunmetal (#1A3423) as the single point of color. Saturation stays low across the board, giving it a calm, editorial feel.

Two of the four colors are near-neutral, which leaves room for Fern to lead. Lightness runs from 15% to 83%. Well suited to websites, presentations and branding.

Background: Fog (#D7D5CE) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#1A3423) on #D7D5CE gives 9.17:1, passing WCAG AAA.
Primary: Fern (#597455) is the most saturated mid-tone; use it for buttons and links (3.53:1 against the background, fine for UI elements).
Accent: Ash (#BCC1B0) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Fog on Gunmetal at 9.17:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Fern & Gunmetal Breeze

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

#D7D5CE

#BCC1B0

#597455

#1A3423

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
`#D7D5CE` on `#1A3423`	Aa	9.17:1	AAA
`#BCC1B0` on `#1A3423`	Aa	7.31:1	AAA
`#D7D5CE` on `#597455`	Aa	3.53:1	AA large only
`#BCC1B0` on `#597455`	Aa	2.81:1	Fail
`#597455` on `#1A3423`	Aa	2.6:1	Fail
`#D7D5CE` on `#BCC1B0`	Aa	1.25:1	Fail

Similar palettes 24 more in this mood