Earth Tone Color Palette

Earth tones are the colors of soil, stone, clay and plants: browns, ochre, olive, moss, terracotta and sand. They are warm, low in saturation and easy to combine, because they share the same muted, slightly yellow cast.

Colors

Describe your project and let AI pick the colors

Try:

See it on a page

Lightest color becomes the background, darkest the text, the most saturated one the button.

NorthwindPricing · Docs · Blog

Ship the release notes your users actually read.

Body text in your darkest color on your lightest: 12.23:1 AA pass

Start freeSee a demo

Surface card with a secondary accent

Export

CSS custom properties, Tailwind v4 @theme (in OKLCH), Tailwind v3 config, JSON or SCSS.

:root {
  --color-dark-slate-gray: #2E2A24;
  --color-dark-olive-green: #5C6B3E;
  --color-sienna: #A0522D;
  --color-tan: #D2B48C;
  --color-linen: #F3EDE2;
}

Contrast between every pair

WCAG 2.2: 4.5:1 for body text (AA), 3:1 for large text and UI parts, 7:1 for AAA.

Contrast ratio of every text color (rows) on every background (columns)
Text / background	#2E2A24	#5C6B3E	#A0522D	#D2B48C	#F3EDE2
#2E2A24		Aa2.46:1Fail	Aa2.53:1Fail	Aa7.22:1AAA	Aa12.23:1AAA
#5C6B3E	Aa2.46:1Fail		Aa1.03:1Fail	Aa2.93:1Fail	Aa4.96:1AA
#A0522D	Aa2.53:1Fail	Aa1.03:1Fail		Aa2.84:1Fail	Aa4.81:1AA
#D2B48C	Aa7.22:1AAA	Aa2.93:1Fail	Aa2.84:1Fail		Aa1.69:1Fail
#F3EDE2	Aa12.23:1AAA	Aa4.96:1AA	Aa4.81:1AA	Aa1.69:1Fail

Get an AI critique of this palette

The contrast numbers are calculated exactly in your browser and passed to the AI, so its advice starts from real ratios.

What is it for? (optional)

Hand-picked earth tone palettes

Clay & moss

12.23:1 text contrast · Edit in generator

Canyon

8.89:1 text contrast · Edit in generator

Stone path

7.56:1 text contrast · Edit in generator

Tips for earth tone palettes

Use the darkest brown or olive for text; mid earth tones fail contrast as text.
One terracotta or ochre accent keeps the palette from looking flat.
Earth tones pair well with off-white, not pure white.

Want one written for your project? Describe it on the AI palette generator, then check it with the accessible palette checker.

Frequently asked questions

What colors are earth tones?

Browns, tans, beiges, ochre, olive and moss green, terracotta, rust and stone greys: muted colors with a warm, natural cast.

What color goes with earth tones?

Cream, off-white and charcoal as neutrals; deep teal, dusty blue or burnt orange as accents.