Earth Tone Palette

A grounded set of soil, sand and bark browns. Warm and organic; suits outdoor, craft and sustainable brands.

earthynaturalwarm
#8B6F4E
#A78A5B
#6B4F3A
#C9A87C
#4E3B2A
#8b6f4e #a78a5b #6b4f3a #c9a87c #4e3b2a
#8B6F4E #A78A5B #6B4F3A #C9A87C #4E3B2A

Semantic roles

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

background#C9A87C
surface#A78A5B
text#4E3B2A
text-muted#6B4F3A
primary#6B4F3A
secondary#8B6F4E
accent#A78A5B

CSS variables 

:root {
  --background: #c9a87c;
  --surface: #a78a5b;
  --text: #4e3b2a;
  --text-muted: #6b4f3a;
  --primary: #6b4f3a;
  --secondary: #8b6f4e;
  --accent: #a78a5b;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#8B6F4E#A78A5B#6B4F3A#C9A87C#4E3B2A
#8B6F4E
1.0
1.4
1.6
2.1
2.3
#A78A5B
1.4
1.0
2.3
1.5
3.2
#6B4F3A
1.6
2.3
1.0
3.3
1.4
#C9A87C
2.1
1.5
3.3
1.0
4.7
#4E3B2A
2.3
3.2
1.4
4.7
1.0

Under deuteranopia

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

Colors in this palette

#8B6F4E
rgb(139, 111, 78)
#A78A5B
rgb(167, 138, 91)
#6B4F3A
rgb(107, 79, 58)
#C9A87C
rgb(201, 168, 124)
#4E3B2A
rgb(78, 59, 42)

Similar palettes

Autumn Color Palette
Luxury Color Palette
Wedding Color Palette

FAQ

How do I use the earth tone palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #8B6F4E, #A78A5B, #6B4F3A, #C9A87C, #4E3B2A.

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.