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.69 : 1AAA
Aa
Umber on sand
Contrast 5.19 : 1AA
Aa
Sand on bark ink
Contrast 7.37 : 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 */
}

FAQ

Frequently asked questions

Earth tones sit at moderate lightness by design, which shrinks the contrast headroom against a light background compared to a fully saturated or fully dark color. Olive (#8A9A5B) only reaches 3.06:1 against white, well below the AA floor, so it needs a dark surface rather than direct use as text.

Terracotta (#A97155) reaches 4.05:1 against white, just under the 4.5:1 AA floor for normal text. Use it for large text, UI borders, or icons, and reserve umber or bark ink for body copy.

Linen (#F5EFE3) works better than pure white here because its warm undertone matches the rest of the set. A stark white background reads as cold against terracotta and olive.

Related palettes

Build on this palette

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