Palette

Terra Cotta Soul

Earthy, warm tones inspired by ancient pottery and sun-baked landscapes.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terra Cotta Soul 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 Terra Cotta Soul.

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

Data visualization

#8B4513#A0522D#CD853F#D2B48C#DEB887

Palette guide

How to use Terra Cotta Soul

Overview

The Terra Cotta Soul palette delves into the rich, enduring spirit of ancient pottery and sun-baked landscapes. This collection features a beautiful gradient of earthy browns and warm, inviting oranges, from the deep #8B4513 to the luminous #DEB887. Shades like #A0522D and #CD853F provide a comforting mid-range, while #D2B48C offers a soft, sandy lightness. It’s an exceptional choice for designs that aim to convey authenticity, heritage, and a profound connection to natural materials. This palette is particularly effective for projects requiring a timeless, grounded, and inherently sophisticated aesthetic, resonating with a sense of tradition and organic beauty.

Best used for

Artisan pottery or craft brands
Historical or cultural institution websites
Organic food packaging with a rustic feel
Spa and wellness centers (earthy themes)
Luxury vintage product lines
Interior design for warm, inviting spaces

Suggested color roles

primary

Use #A0522D as a dominant color for main headings or key design elements, providing a rich, inviting foundation.

secondary

Apply #CD853F for supporting content or background textures, offering a softer, sun-kissed warmth.

accent

Employ #8B4513 for impactful calls-to-action or important details, adding deep contrast and grounding the design.

background

Utilize #DEB887 for light, airy backgrounds, creating a soft, expansive canvas that enhances other palette colors.

text

For body text, #8B4513 ensures excellent readability on lighter backgrounds, conveying a sense of grounded authenticity.

Accessibility notes

Ensure #8B4513 text has strong contrast against #DEB887 backgrounds for optimal readability.
Avoid using #CD853F on #A0522D for small text due to potential low contrast.
Lighter shades like #DEB887 and #D2B48C are best reserved for backgrounds or large decorative elements.
Prioritize darker hues like #8B4513 for critical information to meet accessibility standards.

Recommended combinations

Ancient Earth

A classic, robust combination, ideal for conveying heritage, strength, and natural authenticity.

#A0522D · #8B4513 · #D2B48C

Sunlit Clay

Captures a warm, glowing feel, perfect for designs that aim for a gentle, inviting, and organic aesthetic.

#CD853F · #A0522D · #DEB887

Earthy Foundation

Highlights the palette's depth and lightness, suitable for a balanced, sophisticated, and natural look.

#8B4513 · #D2B48C · #CD853F

CSS variables

:root {
  --terra-cotta-soul-1: #8B4513;
  --terra-cotta-soul-2: #A0522D;
  --terra-cotta-soul-3: #CD853F;
  --terra-cotta-soul-4: #D2B48C;
  --terra-cotta-soul-5: #DEB887;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-soul": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#DEB887",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#CD853F

Color 4#D2B48C

Color 5#DEB887

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

3.6:1AA18

3.8:1AA18

1.3:1Fail

1.9:1Fail

2.8:1Fail

3:1AA18

2.4:1Fail

1.9:1Fail

1.5:1Fail

1.6:1Fail

3.6:1AA18

2.8:1Fail

1.5:1Fail

1.1:1Fail

3.8:1AA18

3:1AA18

1.6:1Fail

1.1:1Fail

Similar palettes

More like Terra Cotta Soul