Palette

Spicy Clay Hearth

Evoking the warmth of a sun-baked adobe home with rich, spicy clay tones.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#CD853F#D2B48C#F5DEB3

Palette guide

How to use Spicy Clay Hearth

Overview

The Spicy Clay Hearth palette exudes a comforting, natural warmth, inspired by sun-baked adobe and rustic charm. This earthy collection features rich SaddleBrown (#8B4513) and Sienna (#A0522D) as deep foundational tones, beautifully complemented by the lighter, spiced hues of Peru (#CD853F) and Tan (#D2B48C). The palette is softened by the gentle cream of Wheat (#F5DEB3), offering a perfect balance. Designers can use this palette to create cozy, inviting, and authentic environments, while developers will appreciate its harmonious blend for user interfaces that feel grounded and organic.

Best used for

Rustic home decor and interior design websites
Crafts, pottery, or artisanal product branding
Cafes, bakeries, or natural food packaging
Websites for eco-friendly products or sustainable living
Brand identity for spas or wellness retreats
Autumnal or desert-themed graphic design projects

Suggested color roles

primary

SaddleBrown (#8B4513) – A deep, grounding brown excellent for main structural elements, navigation, or strong brand typography.

secondary

Sienna (#A0522D) – A rich, reddish-brown that works well for subheadings, secondary buttons, or decorative accents, adding depth without overwhelming.

accent

Peru (#CD853F) – A warm, spicy orange-brown ideal for highlights, interactive elements, or small illustrations that need a touch of warmth and vibrancy.

background

Wheat (#F5DEB3) – A soft, creamy beige that serves as an excellent, light background, providing a clean canvas that enhances the earthy tones.

text

SaddleBrown (#8B4513) or a darker brown/charcoal for excellent readability on lighter backgrounds.

Accessibility notes

SaddleBrown (#8B4513) and Sienna (#A0522D) provide good contrast against Wheat (#F5DEB3) for body text.
Peru (#CD853F) might require larger text sizes or bolder weights to meet WCAG AA contrast on Wheat (#F5DEB3) for small text.
Avoid using Tan (#D2B48C) or Wheat (#F5DEB3) for text on similarly light backgrounds; ensure sufficient color difference.
Always check contrast ratios for text and interactive elements, especially when pairing mid-tones like Peru (#CD853F) with Tan (#D2B48C).

Recommended combinations

Adobe Warmth

Cozy website layouts, product displays, or branding that evokes natural comfort.

#8B4513 · #CD853F · #F5DEB3

Rustic Depth

Rich, layered backgrounds, textured elements, or sophisticated earthy branding.

#A0522D · #8B4513 · #D2B48C

Soft Desert

Light, airy designs with subtle warm accents, ideal for photography backdrops or gentle UI.

#F5DEB3 · #D2B48C · #CD853F

CSS variables

:root {
  --spicy-clay-hearth-1: #8B4513;
  --spicy-clay-hearth-2: #A0522D;
  --spicy-clay-hearth-3: #CD853F;
  --spicy-clay-hearth-4: #D2B48C;
  --spicy-clay-hearth-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spicy-clay-hearth": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#F5DEB3",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#CD853F

Color 4#D2B48C

Color 5#F5DEB3

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

3.6:1AA18

5.4:1AA

1.3:1Fail

1.9:1Fail

2.8:1Fail

4.3:1AA18

2.4:1Fail

1.9:1Fail

1.5:1Fail

2.3:1Fail

3.6:1AA18

2.8:1Fail

1.5:1Fail

5.4:1AA

4.3:1AA18

2.3:1Fail

1.5:1Fail

Similar palettes

More like Spicy Clay Hearth

Spicy Clay Hearth

See it in context.

Ready when you are.

Built with Spicy Clay Hearth.

How to use Spicy Clay Hearth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Adobe Warmth

Rustic Depth

Soft Desert

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Spicy Clay Hearth