Palette

Desert Clay Hearth

Reflects the raw beauty of sun-baked desert earth and traditional clay pottery.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Clay Hearth 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 Desert Clay Hearth.

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

Data visualization

#D4A373#E8DAB2#BB854E#8C543A#A67153

Palette guide

How to use Desert Clay Hearth

Overview

The Desert Clay Hearth palette beautifully reflects the raw beauty of sun-baked desert earth and traditional clay pottery. This warm and natural collection features the inviting #BB854E and the deeper #8C543A, complemented by the rich #A67153. The inclusion of the light #E8DAB2 adds an airy, sun-kissed element, balancing the earthier tones, while #D4A373 provides a versatile mid-tone. Designers and developers can utilize these colors to evoke a sense of warmth, authenticity, and handcrafted elegance. It's an excellent choice for projects requiring a cozy, rustic, and genuinely natural aesthetic.

Best used for

Handmade pottery and crafts
Rustic cafe or restaurant branding
Earthy home decor websites
Southwestern-inspired branding
Natural skincare and beauty products
Cozy blog or editorial designs

Suggested color roles

primary

#BB854E - A warm, inviting mid-tone brown, excellent for main content areas or dominant graphic elements, offering a soft, natural base.

secondary

#8C543A - A deep, rich earth brown, providing a strong, grounding presence for navigation, footers, or important textual content.

accent

#D4A373 - A lighter, warm clay-beige, perfect for subtle highlights, interactive states, or decorative flourishes that add visual interest.

background

#E8DAB2 - A very light, creamy beige, serving as a clean, spacious backdrop that enhances readability and the natural feel.

text

#8C543A - A deep, robust brown, offering excellent readability for body text against lighter backgrounds, or use black for maximum contrast.

Accessibility notes

Ensure sufficient contrast between #8C543A text and #E8DAB2 backgrounds for WCAG AA compliance.
Avoid using #BB854E or #D4A373 for small text on similar background shades, as contrast may be insufficient.
For critical information, pair the darkest color #8C543A with the lightest background #E8DAB2.
Consider using pure black or a very dark charcoal for body text on very light backgrounds for optimal legibility.

Recommended combinations

Hearth & Clay

High-contrast pairing for headlines and clean backgrounds, evoking raw earth and light.

#8C543A · #E8DAB2 · #D4A373

Pottery Warmth

A soft, warm blend for layered UI elements or subtle branding accents, reflecting handcrafted textures.

#BB854E · #D4A373 · #E8DAB2

Earthen Core

A versatile trio for extensive layouts, providing depth and natural warmth across sections.

#A67153 · #8C543A · #E8DAB2

CSS variables

:root {
  --desert-clay-hearth-1: #D4A373;
  --desert-clay-hearth-2: #E8DAB2;
  --desert-clay-hearth-3: #BB854E;
  --desert-clay-hearth-4: #8C543A;
  --desert-clay-hearth-5: #A67153;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-clay-hearth": {
        1: "#D4A373",
        2: "#E8DAB2",
        3: "#BB854E",
        4: "#8C543A",
        5: "#A67153",
      }
    }
  }
}

Hex values

Color 1#D4A373

Color 2#E8DAB2

Color 3#BB854E

Color 4#8C543A

Color 5#A67153

Accessibility

Contrast checker

1.6:1Fail

1.4:1Fail

2.7:1Fail

1.8:1Fail

1.6:1Fail

2.3:1Fail

4.4:1AA18

3:1Fail

1.4:1Fail

2.3:1Fail

1.9:1Fail

1.3:1Fail

2.7:1Fail

4.4:1AA18

1.9:1Fail

1.5:1Fail

1.8:1Fail

3:1Fail

1.3:1Fail

1.5:1Fail

Similar palettes

More like Desert Clay Hearth

Desert Mesa Sculptures

Earthenware Rustic Bake