paletta
PALETTE GALLERY

Earth tone color palette

Earth-tone palettes desaturate warm and neutral hues toward brown, clay, and moss. This set pairs an umber primary with terracotta and olive accents on a linen background, holding enough saturation to stay distinct from a plain neutral gray palette.

Updated 2026-07-15

  • UmberPrimary
    #6B4226
  • TerracottaAccent
    #A97155
  • OliveHighlight
    #8A9A5B
  • SandSurface
    #D9C7A3
  • Bark InkText
    #3F3327
  • LinenBackground
    #F5EFE3

Where this palette works

Sustainability and outdoor brands

Umber and olive are the default shorthand for natural materials and outdoor products.

Editorial and long-form reading surfaces

Linen and sand are warmer than pure white, which reduces glare on text-heavy pages.

Craft, home, and lifestyle products

Terracotta and olive read as handmade rather than manufactured, useful for product categories that want to avoid a sterile look.

Accessible pairings

Bark ink and umber both clear AAA against linen, giving the palette two usable text colors depending on whether the page wants a near-black or a warm brown reading tone.

Aa
Bark ink on linen
Contrast 10.70 : 1AAA
Aa
Umber on sand
Contrast 5.20 : 1AA
Aa
Sand on bark ink
Contrast 7.38 : 1AAA
EXPORT

Use these tokens

Copy as CSS custom properties or a Tailwind v4 @theme block.

:root {
  --palette-primary: #6B4226; /* Umber */
  --palette-accent: #A97155; /* Terracotta */
  --palette-highlight: #8A9A5B; /* Olive */
  --palette-surface: #D9C7A3; /* Sand */
  --palette-text: #3F3327; /* Bark Ink */
  --palette-background: #F5EFE3; /* Linen */
}

Frequently asked questions

Related palettes

Autumn palette

An autumn color palette built from maple red, pumpkin, and gold, with hex codes, accessible text pairings, and export-ready CSS variables.

Neutral minimalist palette

A neutral minimalist color palette built from charcoal, taupe, and warm gray, with hex codes, accessible text pairings, and export-ready CSS variables.

Retro 70s palette

A retro 1970s color palette built from mustard, rust, and avocado green, with hex codes, accessible text pairings, and export-ready CSS variables.

Build on this palette

Generate a full shade scale and export to Tailwind, shadcn, or Figma Variables.

Generate a palette