Back to palettes

Palette

Earth Clay Hearth

Grounded and organic tones reflecting ancient pottery, sun-baked earth, and cozy, rustic warmth.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C4729#A66321#CC8B3A#DDA15E#CD8C6F

Palette guide

How to use Earth Clay Hearth

Overview

The Earth Clay Hearth palette offers grounded and organic tones reflecting ancient pottery, sun-baked earth, and cozy, rustic warmth. Featuring rich browns and oranges like #8C4729 and #A66321, it transitions to brighter, inviting shades such as #CC8B3A and #DDA15E, with #CD8C6F adding a unique reddish-brown hue. This palette is ideal for designers and developers seeking to create natural, comforting, and artisanal experiences. It's versatile for conveying warmth, heritage, and an authentic, handmade feel across web interfaces, branding, and physical product designs, particularly those with an earthy or rustic aesthetic.

Best used for

  • Artisan craft branding
  • Rustic interior design
  • Earthy website themes
  • Organic food packaging
  • Ceramics and pottery products
  • Cozy lifestyle blogs

Suggested color roles

primary

#A66321 - A rich, warm clay brown, excellent for primary UI elements or brand accents.

secondary

#CC8B3A - A brighter, inviting orange-brown, ideal for supporting content or secondary highlights.

accent

#8C4729 - The deepest, most grounding earth brown, perfect for impactful accents or calls-to-action.

background

#DDA15E - The lightest, warm sandy orange, providing a soft and inviting canvas.

text

#8C4729 - A deep, readable earth brown, ensuring strong contrast on lighter palette colors.

Accessibility notes

  • Ensure #8C4729 is used for text on #DDA15E or #CD8C6F to meet WCAG contrast guidelines.
  • Avoid using #CC8B3A or #DDA15E for text on other mid-tone palette colors 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

Warm Earth Gradient

Smooth, warm background transitions or layered visual effects in web or print.

#DDA15E · #CC8B3A · #A66321

Hearth Contrast

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

#8C4729 · #DDA15E · #A66321

Clay Harmony

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

#CD8C6F · #A66321 · #CC8B3A

CSS variables

:root {
  --earth-clay-hearth-1: #8C4729;
  --earth-clay-hearth-2: #A66321;
  --earth-clay-hearth-3: #CC8B3A;
  --earth-clay-hearth-4: #DDA15E;
  --earth-clay-hearth-5: #CD8C6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earth-clay-hearth": {
        1: "#8C4729",
        2: "#A66321",
        3: "#CC8B3A",
        4: "#DDA15E",
        5: "#CD8C6F",
      }
    }
  }
}

Related searches

earth clay color paletterustic warm brownsterracotta orange schemenatural hearth colorsartisanal earth tones

Palette colors

Hex values

Color 1#8C4729
·
Color 2#A66321
·
Color 3#CC8B3A
·
Color 4#DDA15E
·
Color 5#CD8C6F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.1:1AA18
2.5:1Fail
2
1.5:1Fail
1.7:1Fail
2.1:1Fail
1.7:1Fail
3
2.4:1Fail
1.7:1Fail
1.3:1Fail
1:1Fail
4
3.1:1AA18
2.1:1Fail
1.3:1Fail
1.2:1Fail
5
2.5:1Fail
1.7:1Fail
1:1Fail
1.2:1Fail

Similar palettes

More like Earth Clay Hearth

View all earth
Ancient Clay Vessel
Mesa Clay
Terra Cotta Dreams
Artisan Clay Glaze
Artisan Clay Vessel
Bohemian Spice Earth