Earth color palettes

Use earth color palettes with clay, sand, stone, and forest notes for craft brands, hospitality, editorial pages, and grounded product surfaces.

How to use earth color palettes

Earth palettes are the least saturated collection on this site: clay, terracotta, sand, taupe, and stone, usually with one cool mineral color such as pale sky or teal. Low saturation makes them comfortable as large surfaces and puts more weight on the value differences between colors.

Where earth palettes work

Architecture, interior design, and furniture portfolios
Ceramics, textile, and other maker shops
Boutique hotels, retreats, and travel guides
Coffee, bakery, and natural skincare brands

Low saturation, mineral accents

Earth palettes have the lowest average saturation of the collections on this site, at about 42% HSL, and roughly one swatch in seven is close to neutral. The core is desaturated orange: clay, terracotta, sand, and tan. Around those, you often find stone greys and a cool mineral color, such as the pale blue #cee6f3, the teal #116a7b, or the slate #537188.

That cool accent is what separates earth from fall, which is warmer and more saturated (about 55%), and from vintage, which leans on cream and print colors. The collections overlap: about two in five earth palettes also appear under vintage.

Clay and sky, mapped

#6c3428, #ba704f, #dfa878, #cee6f3 runs from dark clay to a pale sky blue. The cool swatch makes a calm page color, and the clay supplies text.

#cee6f3 page with #6c3428 text at 7.52:1.
#6c3428 buttons with white labels at 9.72:1.
#ba704f for illustration and large headings. White text on it is 3.81:1, enough only for large text.
#dfa878 for cards or highlights; #6c3428 text on it measures 4.64:1.

css

:root {
  --bg: #cee6f3;
  --card: #dfa878;
  --accent: #ba704f;
  --text: #6c3428;
}

Keep the values apart

Earth tones blur when they are all mid-value. Tan text on clay, or sand cards on beige pages, can look acceptable in a mockup and still fail. In #c2dedc, #ece5c7, #cdc2ae, #116a7b, only the teal works for text: 4.92:1 on #ece5c7 but 4.38:1 on #c2dedc, so set body text on the cream and use the teal for buttons, where white labels measure 6.23:1.

Pairing the colors

Anchor the layout on the lightest sand or mineral color, use a dark clay or near-black brown for text, and pick one mid-tone such as terracotta for actions. If the palette has a cool swatch, give it one role only, such as links or a single section background.

Contrast and readability

Earth mid-tones sit close together in value. In #9babb8, #eee3cb, #d7c0ae, #967e76, the taupe #967e76 is 2.97:1 on the sand and 2.17:1 on the tan, too low for text or control borders. Deeper browns hold up: #862b0d measures 8.31:1 on cream #fff9c9 and 5.82:1 on #ffc95f.

Questions

What are earth tone colors?: Colors taken from soil, clay, stone, wood, and plants: terracotta, sand, ochre, olive, taupe, and slate. They are usually desaturated, which is why they work well as large surfaces.
Do earth tones work for a dark theme?: Yes. Use the darkest brown from a palette as the page, such as #6c3428 or #884a39, and the lightest sand for text. #f9e0bb on #884a39 measures 5.32:1. Mid-value clays like #c38154 make poor text on dark brown and work better as fills.

Updated October 14, 2026