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.