What are the hex codes in the Nordic Khaki & Gray palette?

The Nordic Khaki & Gray color palette consists of Gray #6D8977, Dust #A6A6A6, Khaki #CAAF8C, Oat #D2D0B8.

How should I use the Nordic Khaki & Gray palette on a website?

Use Oat #D2D0B8 as the background, Gray #6D8977 for text, Khaki #CAAF8C for buttons and links, and Dust #A6A6A6 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Nordic Khaki & Gray have enough contrast for text?

The highest-contrast pair is #6D8977 on #D2D0B8 with a ratio of 2.45:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#6D8977Gray

#A6A6A6Dust

#CAAF8CKhaki

#D2D0B8Oat

Nordic Khaki & Gray color palette

Scandinavian Muted Gray Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gray	`#6D8977`	`rgb(109, 137, 119)`	`hsl(141, 11%, 48%)`	`oklch(60.3% 0.042 157)`
Dust	`#A6A6A6`	`rgb(166, 166, 166)`	`hsl(0, 0%, 65%)`	`oklch(72.5% 0.000 0)`
Khaki	`#CAAF8C`	`rgb(202, 175, 140)`	`hsl(34, 37%, 67%)`	`oklch(76.9% 0.057 74)`
Oat	`#D2D0B8`	`rgb(210, 208, 184)`	`hsl(55, 22%, 77%)`	`oklch(85.3% 0.032 103)`

Why it works and how to use it

Nordic Khaki & Gray is a muted monochromatic color palette tagged scandinavian, muted, gray. All four colors sit within 21° of hue, so the scheme reads as one color explored across light and dark. Every color is softened, so it works well as a background system for text-heavy layouts. The overall temperature is warm.

The palette holds together thanks to its monochromatic hue relationship and a soft light-to-dark ladder (77% down to 48% lightness). A natural fit for websites, presentations and branding.

Background: Oat (#D2D0B8) is the lightest color, so it belongs on large surfaces.
Text: Gray (#6D8977) on #D2D0B8 gives 2.45:1, so pair it with a darker neutral for body copy.
Primary: Khaki (#CAAF8C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dust (#A6A6A6) 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 Nordic Khaki & Gray

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

#6D8977

#A6A6A6

#CAAF8C

#D2D0B8

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
`#6D8977` on `#D2D0B8`	Aa	2.45:1	Fail
`#6D8977` on `#CAAF8C`	Aa	1.82:1	Fail
`#6D8977` on `#A6A6A6`	Aa	1.57:1	Fail
`#A6A6A6` on `#D2D0B8`	Aa	1.56:1	Fail
`#CAAF8C` on `#D2D0B8`	Aa	1.34:1	Fail
`#A6A6A6` on `#CAAF8C`	Aa	1.16:1	Fail

Similar palettes 24 more in this mood