#6D8977Gray
#A6A6A6Dust
#CAAF8CKhaki
#D2D0B8Oat

Nordic Khaki & Gray color palette

ScandinavianMutedGrayBeige
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

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.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Gray#6D8977rgb(109, 137, 119)hsl(141, 11%, 48%)oklch(60.3% 0.042 157)
Dust#A6A6A6rgb(166, 166, 166)hsl(0, 0%, 65%)oklch(72.5% 0.000 0)
Khaki#CAAF8Crgb(202, 175, 140)hsl(34, 37%, 67%)oklch(76.9% 0.057 74)
Oat#D2D0B8rgb(210, 208, 184)hsl(55, 22%, 77%)oklch(85.3% 0.032 103)

Why it works and how to use it

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
Card title
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.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#6D8977 on #D2D0B8Aa2.45:1Fail
#6D8977 on #CAAF8CAa1.82:1Fail
#6D8977 on #A6A6A6Aa1.57:1Fail
#A6A6A6 on #D2D0B8Aa1.56:1Fail
#CAAF8C on #D2D0B8Aa1.34:1Fail
#A6A6A6 on #CAAF8CAa1.16:1Fail

Similar palettes 24 more in this mood

More scandinavian palettes →More muted palettes →More gray palettes →More beige palettes →