Desert Color Palette

Sand, dune shadow, sun-bleached clay and a burnt-amber accent — the palette of noon in arid country. Anchors: #C19A6B, #E9DCC9, #8B6F4E, #B45309.

desertsanddry
#C19A6B
#E9DCC9
#8B6F4E
#B45309
#E5D0BA
#c19a6b #e9dcc9 #8b6f4e #b45309 #e5d0ba
#C19A6B #E9DCC9 #8B6F4E #B45309 #E5D0BA

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#E9DCC9
surface#E5D0BA
text#B45309
text-muted#8B6F4E
primary#C19A6B
secondary#8B6F4E
accent#E5D0BA

CSS variables

:root {
  --background: #e9dcc9;
  --surface: #e5d0ba;
  --text: #b45309;
  --text-muted: #8b6f4e;
  --primary: #c19a6b;
  --secondary: #8b6f4e;
  --accent: #e5d0ba;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#C19A6B#E9DCC9#8B6F4E#B45309#E5D0BA
#C19A6B
1.0
1.9
1.8
1.9
1.7
#E9DCC9
1.9
1.0
3.5
3.7
1.1
#8B6F4E
1.8
3.5
1.0
1.1
3.1
#B45309
1.9
3.7
1.1
1.0
3.4
#E5D0BA
1.7
1.1
3.1
3.4
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

Similar palettes

FAQ

How do I use the desert color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #C19A6B, #E9DCC9, #8B6F4E, #B45309, #E5D0BA.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.