Palette

Earthen Clay Pot

Reflects the raw, honest beauty of handcrafted ceramics, celebrating the warm and rustic tones of natural clay.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8b4513#a0522d#cd853f#deb887#d2b48c

Palette guide

How to use Earthen Clay Pot

Overview

The Earthen Clay Pot palette reflects the raw, honest beauty of handcrafted ceramics, celebrating the warm and rustic tones of natural clay. Featuring rich browns like #8b4513, #a0522d, and #cd853f, it's beautifully complemented by softer, sandy tones such as #deb887 and #d2b48c. This palette is ideal for designers and developers seeking to create natural, warm, and authentic experiences. It's versatile for conveying craftsmanship, tradition, and an organic feel across web interfaces, branding, and physical product designs, particularly those with an artisanal or rustic aesthetic.

Best used for

Handmade pottery branding
Rustic home goods e-commerce
Artisan food packaging
Eco-friendly product lines
Traditional craft websites
Farm-to-table restaurant branding

Suggested color roles

primary

#cd853f - A warm, inviting clay orange-brown, excellent for primary UI elements or brand accents.

secondary

#a0522d - A rich, reddish-brown, ideal for supporting content or secondary highlights.

accent

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

background

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

text

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

Accessibility notes

Ensure #8b4513 or #a0522d is used for text on #d2b48c or #deb887 to meet WCAG contrast guidelines.
Avoid using #cd853f for text on #deb887 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

Clay & Sand

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

#D2B48C · #DEB887 · #CD853F

Artisan Contrast

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

#8B4513 · #A0522D · #D2B48C

Rustic Blend

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

#A0522D · #CD853F · #DEB887

CSS variables

:root {
  --earthen-clay-pot-1: #8b4513;
  --earthen-clay-pot-2: #a0522d;
  --earthen-clay-pot-3: #cd853f;
  --earthen-clay-pot-4: #deb887;
  --earthen-clay-pot-5: #d2b48c;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earthen-clay-pot": {
        1: "#8b4513",
        2: "#a0522d",
        3: "#cd853f",
        4: "#deb887",
        5: "#d2b48c",
      }
    }
  }
}

Hex values

Color 1#8b4513

Color 2#a0522d

Color 3#cd853f

Color 4#deb887

Color 5#d2b48c

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

3.8:1AA18

3.6:1AA18

1.3:1Fail

1.9:1Fail

3:1AA18

2.8:1Fail

2.4:1Fail

1.9:1Fail

1.6:1Fail

1.5:1Fail