Back to palettes

Palette

Earthen Clay Essence

The rich, grounded hues of natural clay, from wet terracotta to dry, sun-baked earth.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Earthen Clay Essence 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 Clay Essence.

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

Data visualization

#CD5C5C#BC8F8F#DAA06B#D2B48C#A0522D

Palette guide

How to use Earthen Clay Essence

Overview

The Earthen Clay Essence palette captures the rich, grounded hues of natural clay, from wet terracotta to dry, sun-baked earth. Featuring warm reds like #CD5C5C and #BC8F8F, it blends seamlessly with earthy oranges and browns such as #DAA06B, #D2B48C, and #A0522D. This palette is ideal for designers and developers seeking to create natural, rustic, and authentic experiences. It's versatile for conveying warmth, organic beauty, and a grounded feel across web interfaces, branding, and physical product designs, particularly those with an artisanal or natural aesthetic.

Best used for

  • Traditional pottery branding
  • Southwestern interior design
  • Earthy fashion collections
  • Natural beauty products
  • Rustic restaurant decor
  • Artisan craft websites

Suggested color roles

primary

#DAA06B - A warm, inviting terracotta orange, excellent for primary UI elements or brand accents.

secondary

#BC8F8F - A softer, muted rose-brown, ideal for supporting content or secondary highlights.

accent

#A0522D - The deepest, most grounding reddish-brown, perfect for impactful accents or calls-to-action.

background

#D2B48C - The lightest, sandy beige, providing a soft and natural canvas.

text

#A0522D - A deep, readable reddish-brown, ensuring strong contrast on lighter palette colors.

Accessibility notes

  • Ensure #A0522D is used for text on #D2B48C or #DAA06B to meet WCAG contrast guidelines.
  • Avoid using #BC8F8F or #CD5C5C for text on #D2B48C due to insufficient contrast.
  • The darkest shades provide excellent contrast for text on any of the lighter palette colors.
  • Test all text/background color pairs with WCAG 2.1 AA guidelines, especially for small text.

Recommended combinations

Sun-baked Earth

Soft, warm background gradients or layered visual effects evoking natural light.

#D2B48C · #DAA06B · #A0522D

Terracotta Contrast

High-contrast headings, buttons, or key information against a clean, light backdrop.

#CD5C5C · #D2B48C · #BC8F8F

Rustic Blend

Creating balanced content blocks or decorative elements with an organic, rustic feel.

#BC8F8F · #DAA06B · #A0522D

CSS variables

:root {
  --earthen-clay-essence-1: #CD5C5C;
  --earthen-clay-essence-2: #BC8F8F;
  --earthen-clay-essence-3: #DAA06B;
  --earthen-clay-essence-4: #D2B48C;
  --earthen-clay-essence-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earthen-clay-essence": {
        1: "#CD5C5C",
        2: "#BC8F8F",
        3: "#DAA06B",
        4: "#D2B48C",
        5: "#A0522D",
      }
    }
  }
}

Related searches

earthen clay color palettenatural terracotta tonesrustic red brown schemepottery inspired colorswarm earthy aesthetic

Palette colors

Hex values

Color 1#CD5C5C
·
Color 2#BC8F8F
·
Color 3#DAA06B
·
Color 4#D2B48C
·
Color 5#A0522D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
2:1Fail
1.4:1Fail
2
1.4:1Fail
1.2:1Fail
1.4:1Fail
2:1Fail
3
1.7:1Fail
1.2:1Fail
1.2:1Fail
2.5:1Fail
4
2:1Fail
1.4:1Fail
1.2:1Fail
2.8:1Fail
5
1.4:1Fail
2:1Fail
2.5:1Fail
2.8:1Fail

Similar palettes

More like Earthen Clay Essence

View all earth
Canyon Clay Whisper
Ceramic Pot Earth
Desert Jasper Vein
Aged Wood Stain
Ancient Amphora Clay
Ancient Clay Vessel