Back to palettes

Palette

Clay Earth Hearth

Warm, grounding colors inspired by artisanal clay pottery and a cozy hearth at sunset.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7A4F35#A8785C#D6A382#E8CBB3#F2E2D4

Palette guide

How to use Clay Earth Hearth

Overview

The Clay Earth Hearth palette evokes a comforting, rustic ambiance, perfect for designs seeking warmth and natural grounding. With its deep brown #7A4F35, a balanced mid-tone like #A8785C, and lighter, airy shades such as #F2E2D4, this collection is incredibly versatile. Designers can harness the rich, earthy tones to create inviting digital spaces or brand identities that feel authentic and handcrafted. Developers will find these hex codes easy to implement for UI elements that require a touch of organic elegance. The palette transitions smoothly from dark, foundational hues to soft, luminous accents, making it ideal for layered designs that convey coziness and timeless appeal.

Best used for

  • Rustic brand identities and logos
  • Cozy home decor websites or apps
  • Artisanal product packaging
  • Autumnal event invitations
  • Earthy blog themes or content layouts
  • Natural skincare or organic food branding

Suggested color roles

primary

#7A4F35 as a strong, grounding primary for headers or main sections, establishing a deep, natural foundation.

secondary

#A8785C provides a warm, inviting secondary color, excellent for feature blocks or important call-to-action buttons.

accent

#D6A382 offers a bright, warm accent, perfect for highlighting key information or interactive elements.

background

#F2E2D4 creates a soft, luminous background, ensuring content remains legible and the overall feel is light and airy.

text

For dark text on light backgrounds, consider a deep charcoal or #7A4F35. For light text on dark backgrounds, #F2E2D4 works beautifully.

Accessibility notes

  • Ensure sufficient contrast between #7A4F35 text and #F2E2D4 background for readability (WCAG AA).
  • Avoid using #E8CBB3 text on #F2E2D4 backgrounds due to low contrast.
  • Use a tool to check contrast ratios for #D6A382 on #E8CBB3, as they might blend too much for smaller text.
  • Reserve lighter shades like #E8CBB3 and #F2E2D4 for larger display text or backgrounds, not small body text.

Recommended combinations

Rustic Depth

Ideal for hero sections where #7A4F35 grounds the design, #A8785C provides balance, and #F2E2D4 offers legible text.

#7A4F35 · #A8785C · #F2E2D4

Earthy Glow

Perfect for content cards or featurettes, creating a warm, inviting visual flow with good hierarchy.

#A8785C · #D6A382 · #E8CBB3

Soft Blend

Use #E8CBB3 and #F2E2D4 for subtle background textures or layered elements, with #7A4F35 for strong textual contrast.

#E8CBB3 · #F2E2D4 · #7A4F35

CSS variables

:root {
  --clay-earth-hearth-1: #7A4F35;
  --clay-earth-hearth-2: #A8785C;
  --clay-earth-hearth-3: #D6A382;
  --clay-earth-hearth-4: #E8CBB3;
  --clay-earth-hearth-5: #F2E2D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clay-earth-hearth": {
        1: "#7A4F35",
        2: "#A8785C",
        3: "#D6A382",
        4: "#E8CBB3",
        5: "#F2E2D4",
      }
    }
  }
}

Related searches

warm brown color paletteearthy rustic design colorscozy terracotta hex codesnatural clay color schemehearth inspired web design

Palette colors

Hex values

Color 1#7A4F35
·
Color 2#A8785C
·
Color 3#D6A382
·
Color 4#E8CBB3
·
Color 5#F2E2D4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.1:1AA18
4.5:1AA
5.5:1AA
2
1.8:1Fail
1.7:1Fail
2.5:1Fail
3:1AA18
3
3.1:1AA18
1.7:1Fail
1.4:1Fail
1.8:1Fail
4
4.5:1AA
2.5:1Fail
1.4:1Fail
1.2:1Fail
5
5.5:1AA
3:1AA18
1.8:1Fail
1.2:1Fail

Similar palettes

More like Clay Earth Hearth

View all earth
Desert Pot Shards
Mediterranean Terra cotta
Spicy Clay Hearth
Sunbaked Clay Earth
Sunbaked Clay Pot
Sunbaked Clay Pot