Earth tone color palettes: grounded codes to copy

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.

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.

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.

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 and beige gradients go deeper into each family.

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 explains it.

Earth tone palette as CSS variables

: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%);
}

Earthy palettes overlap with autumn colour palettes, muted colour palettes and Japandi colours, 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.