# Earth tone color palettes: grounded codes to copy

[Canonical HTML page](https://gradiently.design/guide/earth-tone-colors)

Earth tones are the colours of clay, sand, bark, moss and stone. They feel calm, honest and warm, and they are surprisingly easy to get flat. Here are eight palettes with codes that stay alive.

## The short version

- An earth tone color palette uses the muted colours of natural materials: browns, tans, sand, clay, terracotta, ochre, olive, moss and warm greys.
- Earth tones feel calm, warm and trustworthy, which is why they are common in interiors, food, wellness, outdoor and craft brands.
- Earth tone palettes look flat when every colour has the same lightness, so include a pale ground, a mid tone and a very dark brown or olive.
- A single brighter accent such as burnt orange, ochre or a deep teal keeps an earthy palette from feeling dull.
- Dark espresso or bark brown is the most reliable text colour on light earth tones, and warm cream reads well on dark ones.

An **earth tone color palette** is built from the muted, warm colours of natural materials: sand `#e7d8c3`, clay `#c2703d`, sienna `#a0522d`, olive `#6b7046`, bark `#3d2b1f` and the creams, ochres and greys around them. These colours feel calm and honest because we see them in soil, stone, wood and dry grass. The trick is range. A good earthy palette always includes a pale ground, one or two mid tones and a deep dark, otherwise it turns into a single beige blur. Below are eight palettes with codes you can copy.

## What counts as an earth tone

Earth tones are lower in saturation than the colours on a standard colour wheel and mostly sit in the warm half: reds turned to rust, oranges turned to clay, yellows turned to ochre, greens turned to olive and sage. Many are named after real pigments, such as sienna and umber, which were originally made from coloured earth.

| Colour | Hex | Found in | Feels |
| --- | --- | --- | --- |
| Sand | `#e7d8c3` | Beaches, plaster, linen | Light, calm |
| Ochre | `#c8963e` | Clay pigment, dry grass | Sunny, aged |
| Terracotta | `#c2703d` | Fired clay, tiles | Warm, handmade |
| Sienna | `#a0522d` | Iron rich soil | Rich, earthy |
| Olive | `#6b7046` | Olive leaves, lichen | Grounded, mature |
| Sage | `#9caf88` | Dried herbs | Soft, restful |
| Stone | `#a8a196` | Granite, slate | Quiet, neutral |
| Bark | `#3d2b1f` | Tree bark, coffee | Solid, dependable |

Eight core earth tones. Most palettes below are built from three to five of them.

## Eight earth tone color palettes

Each palette lists colours from lightest to darkest. Use the first as a background, the middle ones for shapes and images, and the last for text.

- Bone: #f3ece2
- Dune: #e0c3a3
- Terracotta: #c2703d
- Rust: #8b4a2b
- Bark: #3d2b1f

**Desert clay.** Warm and sunlit. Suits ceramics, interiors and travel.

- Pale sage: #eef0e5
- Sage: #9caf88
- Olive: #6b7046
- Moss: #4a4a2f
- Forest ink: #1f2416

**Olive grove.** Green leaning and restful. Suits wellness, food and gardening.

- Shell: #f5efe6
- Sand: #e7d8c3
- Driftwood: #a8a196
- Sea stone: #5f6b6d
- Slate: #2e3335

**Coastal sand.** Cooler and airy. Suits hotels, skincare and architecture.

- Straw: #f1e4c8
- Ochre: #c8963e
- Sienna: #a0522d
- Umber: #6b3e26
- Espresso: #2b1d14

**Autumn harvest.** Rich and golden. Suits bakeries, coffee and seasonal campaigns.

- Rice paper: #ece6dc
- Oat: #c9bba5
- Taupe: #8c7b67
- Walnut: #5b5246
- Charcoal: #262320

**Quiet neutral.** Almost colourless, very calm. Suits Japandi interiors, furniture and editorial layouts.

- Blush clay: #f4e9df
- Adobe: #d9a38a
- Brick: #b4644a
- Oxide: #7a3b2e
- Cocoa: #3a1f19

**Terracotta studio.** Pink leaning and soft. Suits florists, candles and boho brands.

- Mist: #d8cfc0
- Lichen: #6b6250
- Peat: #4a3b2c
- Soil: #2a2119
- Night earth: #14100c

**Dark earth.** Moody and premium. Suits whisky, leather, outdoor gear and menswear.

- Bone: #f3ece2
- Camel: #d9c3a5
- Olive: #6b7046
- Deep teal: #2f5d62
- Bark: #3d2b1f

**Earth with an accent.** A deep teal lifts the whole set without breaking the mood.

## How to balance an earth tone palette

Earth tones share low saturation, so lightness has to do the work that saturation usually does. If all your colours are mid tones, the design looks flat and muddy. Spread them across light, middle and dark, then assign them with the [60 30 10 rule](https://gradiently.design/guide/60-30-10-rule).

| Role | Share | Desert clay example |
| --- | --- | --- |
| Ground | About 60% | Bone `#f3ece2` |
| Supporting | About 30% | Dune `#e0c3a3` and Rust `#8b4a2b` |
| Accent | About 10% | Terracotta `#c2703d` |
| Text | As needed | Bark `#3d2b1f` |

One palette assigned to roles. The accent earns attention because there is so little of it.

> **Add one brighter note** A burnt orange, a mustard or a deep teal at slightly higher saturation than the rest gives the eye somewhere to land. Without it, an earthy palette can feel sleepy.

### Common earth tone mistakes

- **Five beiges in a row.** Colours of the same lightness merge; keep at least one very light and one very dark.
- **Pure black text.** It looks cold against warm browns. Use espresso or bark instead.
- **Mixing warm and cool browns.** A pink terracotta beside a grey taupe looks accidental. Keep the undertones consistent.
- **Too many accents.** One bright note lifts the palette; three turn it into a different palette altogether.

## Earth tone gradients

Earth tones blend easily because they are already close in saturation, so there is little risk of a grey middle. Keep the light source soft and add grain, which suits the material feeling of these colours. [Brown gradients](https://gradiently.design/guide/brown-gradient) and [beige gradients](https://gradiently.design/guide/beige-gradient) go deeper into each family.

- Bone to terracotta: `linear-gradient(160deg, #f3ece2 0%, #e0c3a3 50%, #c2703d 100%)`
- Olive shade: `radial-gradient(circle at 75% 25%, #9caf88 0%, #6b7046 45%, #2a2a1a 100%)`
- Harvest: `linear-gradient(180deg, #f1e4c8 0%, #c8963e 55%, #6b3e26 100%)`
- Embers in soil: `radial-gradient(ellipse at 30% 110%, #b4644a 0%, #4a3b2c 45%, #14100c 90%)`

Four earthy gradients built from the palettes above.

## Text colours on earth tones

Pure black and pure white can look harsh beside such soft colours. Use a very dark brown for text on light grounds and a warm cream on dark ones; white still works on the deeper mid tones such as sienna and olive. Ratios use the WCAG formula, where 4.5:1 is the usual target for small text; [colour contrast](https://gradiently.design/guide/color-contrast-accessibility) explains it.

| Background | Text | Contrast | Verdict |
| --- | --- | --- | --- |
| Bone `#f3ece2` | Bark `#3d2b1f` | 11.5:1 | Excellent |
| Sand `#e7d8c3` | Bark `#3d2b1f` | 9.6:1 | Excellent |
| Terracotta `#c2703d` | White | 3.7:1 | Large headlines only |
| Sienna `#a0522d` | White | 5.6:1 | Good |
| Olive `#6b7046` | White | 5.2:1 | Good |
| Bark `#3d2b1f` | Sand `#e7d8c3` | 9.6:1 | Excellent |

Terracotta and ochre are lighter than they look, so check white text on them carefully.

A portrait post for a ceramics shop with dark brown lettering on a warm bone to terracotta background

A ceramics shop post in desert clay, with bark brown type.

A square coffee roaster post with sand coloured lettering on a dark soil brown background

A coffee roaster post in dark earth, with sand coloured type.

## Earth tone palette as CSS variables

```css
:root {
  --bone: #f3ece2;
  --dune: #e0c3a3;
  --terracotta: #c2703d;
  --rust: #8b4a2b;
  --bark: #3d2b1f;
}

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

.button {
  background: var(--rust);
  color: var(--bone);
}

.tag {
  background: var(--terracotta);
  color: var(--bark);
  font-weight: 700;
}

.hero {
  background: linear-gradient(160deg, var(--bone) 0%, var(--dune) 55%, var(--terracotta) 100%);
}
```

The desert clay palette as custom properties. Bone on rust passes for button labels; bark on terracotta only reaches about 3.6:1, so keep it to large, bold tags.

Earthy palettes overlap with [autumn colour palettes](https://gradiently.design/guide/autumn-color-palettes), [muted colour palettes](https://gradiently.design/guide/muted-color-palettes) and [Japandi colours](https://gradiently.design/guide/japandi-colors), so borrow from those once you have a base. If you want an earthy background with real material to it, Gradiently's Marks combine colour with materials, grain and light, and the Designer can lay out posts in your Mark from a short description.

## FAQ

### What colours are earth tones?

Muted, mostly warm colours from natural materials: browns, tans, sand, beige, terracotta, rust, ochre, olive, sage, moss and warm greys.

### What are some earth tone hex codes?

Sand `#e7d8c3`, ochre `#c8963e`, terracotta `#c2703d`, sienna `#a0522d`, olive `#6b7046`, sage `#9caf88` and bark `#3d2b1f` are a good starting set.

### What colour goes well with earth tones?

A deep teal, a burnt orange or a mustard used as a small accent. Warm cream and dark espresso work as the light and dark ends.

### How do I keep an earth tone palette from looking dull?

Spread the colours across light, mid and dark values, and add one slightly more saturated accent used in about a tenth of the design.

### Are earth tones good for branding?

Yes, for brands that want to feel calm, natural and trustworthy, such as interiors, food, wellness, outdoor and craft businesses.