Back to Blog
Earth Tone Color Palette: 6 Natural Schemes with Hex Codes
Inspiration July 16, 2026 · 3 min read

Earth Tone Color Palette: 6 Natural Schemes with Hex Codes

Six earth tone color palettes with hex codes — clay, moss, sand, stone and bark — plus why earthy colors feel premium and copy-paste CSS.

An earth tone color palette is drawn straight from the ground beneath us — clay, sand, moss, stone and bark. These muted, mineral colors feel grounded, honest and quietly premium, which is why they dominate modern branding for coffee, skincare, architecture, and every "organic" product on the shelf.

Below are six earth tone palettes with hex codes and copy-paste CSS. They share DNA with our boho palette and brown palette guides — or browse thousands more on PaletteCSS.

What counts as an earth tone?

Earth tones are desaturated, warm-leaning naturals — colors that could plausibly appear in soil, rock or dried plants. The palette family includes ochre, terracotta, umber, olive, moss, sand, taupe and slate. What unites them: low saturation, medium-to-dark lightness, and warm undertones.

  • Clay and terracotta — warm baked reds and oranges.
  • Sand and ochre — golden, sun-dried neutrals.
  • Moss and olive — muted, grey-green plant tones.
  • Stone and bark — the taupe-to-brown backbone.

6 earth tone color palettes (with hex codes)

1. Desert Clay

Sun-baked warmth from sand to umber.

#EFE3D0 · #D9B48F · #BC8A5F · #8F5B3C · #4E3222

2. Forest Floor

Moss, bark and shadow — deep and organic.

#E9E7DA · #B5B092 · #7C8054 · #55563A · #2E2E22

3. Terracotta & Olive

The signature modern-organic pairing.

#F2E9DC · #D98E5A · #A6552F · #7A8450 · #3F4433

4. Stone & Slate

Cooler minerals for architectural calm.

#EDEAE3 · #C9C2B4 · #948B7B · #5F594E · #31302B

5. Ochre Harvest

Golden fields and late-summer warmth.

#F5EBD7 · #E3B23C · #B97F24 · #7C5518 · #41300F

6. Canyon

Layered reds and browns like desert rock.

#F1E1D0 · #D89B72 · #B15F3C · #7C3D28 · #3E211A

How to use earth tones in CSS

:root {
  --earth-sand:  #EFE3D0;
  --earth-clay:  #BC8A5F;
  --earth-moss:  #7C8054;
  --earth-bark:  #4E3222;
}

body { background: var(--earth-sand); color: var(--earth-bark); }

A subtle earthy gradient keeps things natural:

.section {
  background: linear-gradient(160deg, #EFE3D0 0%, #D9B48F 100%);
}

Tips for designing with earth tones

  • Stay muted. The moment a color turns vivid, it stops being an earth tone — desaturate toward grey or brown.
  • Layer three or more. Earth palettes look richest as tonal stacks: sand background, clay cards, bark text.
  • Add texture and photography. Linen, wood, stone and grain photography complete the organic feel.
  • Use moss as your "green". Bright greens clash with earth tones — olive and moss belong to the family.

Frequently asked questions

What colors are earth tones?

Earth tones include terracotta, clay, ochre, sand, taupe, olive, moss, umber and bark brown — muted, warm colors found in soil, rock and plants.

What is a good earth tone hex code?

Try clay #BC8A5F, moss #7C8054, sand #EFE3D0 or bark #4E3222 as versatile starting points.

Why do brands use earth tones?

Earth tones signal natural, honest and sustainable values, and their muted warmth reads as premium and calm — ideal for organic, artisanal and wellness brands.

Keep exploring: browse earthy color palettes, see the boho palette guide, or copy an earthy gradient instantly.

Tags: earth tone color palette earthy colors natural colors hex codes

Related Posts

Gold Color Palette: 6 Luxurious Schemes with Hex Codes

Gold Color Palette: 6 Luxurious Schemes with Hex Codes

Jul 16, 2026

Jewel Tone Color Palette: 6 Rich Schemes with Hex Codes

Jewel Tone Color Palette: 6 Rich Schemes with Hex Codes

Jul 16, 2026

Summer Color Palette: 6 Sun-Soaked Schemes with Hex Codes

Summer Color Palette: 6 Sun-Soaked Schemes with Hex Codes

Jul 9, 2026

Copied!