Palette

Earthen Roots

Robust browns and deep terracottas embodying the strength and grounding nature of ancient tree roots.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Earthen Roots reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Earthen Roots.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#654321#8B4513#A0522D#CD853F#D2B48C

Palette guide

How to use Earthen Roots

Overview

The Earthen Roots palette is a robust collection of deep browns and rich terracottas, embodying the strength and grounding nature of ancient tree roots and fertile soil. With shades like the very deep #654321 (Dark Brown) and the vibrant #CD853F (Peru), complemented by the softer #D2B48C (Tan), this palette offers a natural and powerful aesthetic. Designers can use these colors to create designs that feel authentic, established, and connected to nature, perfect for branding, web interfaces, or editorial content that emphasizes organic depth and warmth.

Best used for

Organic food and beverage branding
Nature conservation and environmental websites
Rustic lodge and cabin interior design
Heritage brands and historical presentations
Outdoor adventure gear and apparel marketing
Natural building materials promotion

Suggested color roles

primary

#654321 (Dark Brown) serves as a very deep, powerful anchor for strong branding, main headings, and primary elements.

secondary

#8B4513 (Saddle Brown) offers a rich, warm tone for subheadings, important content blocks, and supporting UI elements.

accent

#A0522D (Sienna) provides a vibrant, earthy accent for calls to action, interactive elements, or key highlights.

background

#D2B48C (Tan) creates a soft, neutral backdrop that provides warmth, allows content to breathe, and ensures contrast.

text

Use #654321 for primary text on #D2B48C, ensuring excellent readability and strong visual impact.

Accessibility notes

Both #654321 and #8B4513 provide excellent contrast on #D2B48C, making them highly accessible for text.
Ensure #A0522D on #D2B48C meets WCAG AA guidelines for body text, especially for essential information.
Avoid using #CD853F for small text on #D2B48C due to potential low contrast; reserve for larger headings or accents.
Use strong visual indicators for interactive elements, especially against similar warm tones, to ensure usability.

Recommended combinations

Deep Roots

Create strong, hierarchical content and branding elements with these deep, robust tones.

#654321 · #8B4513 · #A0522D

Earthy Flow

Apply warmer tones for backgrounds, secondary elements, or subtle graphic patterns to add visual interest.

#CD853F · #D2B48C · #A0522D

Grounded Contrast

Design with a light background, a dark primary text, and a vibrant accent for a balanced and impactful layout.

#D2B48C · #654321 · #CD853F

CSS variables

:root {
  --earthen-roots-1: #654321;
  --earthen-roots-2: #8B4513;
  --earthen-roots-3: #A0522D;
  --earthen-roots-4: #CD853F;
  --earthen-roots-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earthen-roots": {
        1: "#654321",
        2: "#8B4513",
        3: "#A0522D",
        4: "#CD853F",
        5: "#D2B48C",
      }
    }
  }
}

Hex values

Color 1#654321

Color 2#8B4513

Color 3#A0522D

Color 4#CD853F

Color 5#D2B48C

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

3:1Fail

4.5:1AA18

1.2:1Fail

1.3:1Fail

2.4:1Fail

3.6:1AA18

1.6:1Fail

1.3:1Fail

1.9:1Fail

2.8:1Fail

3:1Fail

2.4:1Fail

1.9:1Fail

1.5:1Fail

4.5:1AA18

3.6:1AA18

2.8:1Fail

1.5:1Fail

Similar palettes

More like Earthen Roots

View all Earth

Rustic Barnwood Tones

Apothecary Herb Dry

Botanical Earth Ground

Cabin Twilight Hearth

Deep Woods

Earthen Clay Pot