An earth tone website colour palette that stays legible, in light and dark
Earth tones are the colours of soil, clay, stone, wood and dried plants: low in saturation, warm, and close together in lightness. That closeness is what makes them calm and also what makes them muddy. A legible earth tone palette needs one very light ground, one very dark text colour, a single clear action colour, and the mid-tones kept for surfaces and decoration rather than words.
Where the earthy look comes from
Earth pigments are among the oldest colours people have used: red and yellow ochres, umber and sienna, dug from the ground and ground into paint. Interior and product design returned to them repeatedly, most visibly in the browns, oranges and olive greens of the 1970s, and again from the late 2010s as ceramics, wellness, food and slow-living brands moved away from bright digital colour. On the web they signal handmade, natural and unhurried. They suit potters, florists, cafés, outdoor gear, wellness studios and architects working in timber and stone.
Building the palette by job, not by swatch
Mood boards of earthy colour schemes tend to show five swatches of similar weight. A website needs colours with different jobs, and most of those jobs need extremes of lightness that the mood board leaves out.
| Role | Example | What to check |
|---|---|---|
| Ground | Warm off-white, like unbleached paper (#f6f3ea) | Light enough that dark text reaches well over 4.5:1 |
| Surface | Sand, a step darker (#ebe6d7) | Visible against the ground without a border |
| Text | Near-black with a green or brown cast (#22261d) | The highest contrast in the palette |
| Muted text | Stone grey-green (#585c4d) | Still 4.5:1 or more on the ground |
| Action | Deep sage (#3f5a3c) or moss green | Clearly different from text, and 4.5:1 on the ground |
| Decoration | Clay or terracotta (#c9744d) | Used for marks, underlines and illustration, not body text |
The example values are the Organic system's light palette in Anticode, discussed below. Measured against that ground, the text colour reaches about 13.9:1, the muted text about 6.2:1 and the sage action colour about 6.9:1, comfortably above WCAG's contrast minimum of 4.5:1 for body text. The clay reaches only about 3.1:1: fine for large headings and decorative marks, too low for paragraphs or small links.
Keeping it from turning muddy
- Push the ends apart. The ground should be nearly white and the text nearly black. Mid-browns for text on beige is where legibility goes.
- Limit the mid-tones. Two or three are enough: a surface colour, a muted text colour and one decorative accent.
- Keep saturation low but not zero. A sand with a trace of yellow reads as warm; the same lightness in pure grey reads as dull.
- Separate the hues. Clay and ochre next to each other look like the same colour at a glance. Pair a warm with a cool, such as clay with sage, so each has a distinct job.
- Use photography for richness. Wood, linen and stone in photographs carry the texture; flat colour doesn't need to.
- Check with a greyscale filter. If the action colour and the text colour look the same in grey, the action won't stand out for many visitors either.
Earth tones in dark mode
Dark mode is where earthy palettes most often fail. Inverting brown on cream gives cream on brown, and dark browns behind mid-browns produce contrast ratios close to 2:1, which is unreadable. A dark earthy theme works better when it starts from a very dark, slightly green or warm near-black instead of chocolate, and then lightens the accents rather than keeping them as they were.
- Ground: a near-black with a hint of olive or bark, not a mid-brown.
- Text: a warm off-white, not pure white, to avoid glare.
- Accents: the same hues, lighter. Deep sage becomes a pale sage; clay becomes a lighter apricot clay.
- Surfaces: one step lighter than the ground, so cards separate without borders.
In the Organic dark palette, the pale sage action colour on a near-black ground reaches about 10.6:1 and the lighter clay about 6.9:1, so in dark mode the clay can carry text it couldn't in light mode. Dark mode colour palette goes further into the method.
Earth tones in Anticode
Anticode's Organic system is its earth-tone system: Figtree type, sage and clay on warm off-white, soft radii, an arched hero photograph and a hand-drawn wavy underline in clay. It suits ceramics, wellness, florists and food. Editorial (ink on paper) and Luxury (champagne on black) also sit in warm, natural territory if Organic feels too soft.
Each site has one action colour, chosen from red, orange, gold, green, teal, blue, pink and black. With an earthy palette, green and gold sit most naturally; both have a darker value for light themes and a lighter one for dark themes. You can switch between the Auto, Light and Dark themes in the visual editor and tune individual colour tokens, for example warming the ground a step, in the code editor.
Questions people ask
What colours are earth tones?
Low-saturation colours found in nature: clay, terracotta, ochre, sand, olive, sage, moss, umber, stone and bark.
Is terracotta text accessible on cream?
Usually not for body text. A typical terracotta on cream reaches around 3:1, enough only for large headings. Use a darker colour for paragraphs and links.
Which accent colour goes with earth tones?
A deep green or a gold usually sits well, because both occur alongside clay and sand in nature. Keep it the only saturated colour on the page.