Palette

Earthen Clay Crafts

Rich, grounding shades drawn from traditional pottery and natural, unrefined materials.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#964B00#B06500#D2B48C#8B4513#CD853F

Palette guide

How to use Earthen Clay Crafts

Overview

The Earthen Clay Crafts palette presents rich, grounding shades drawn from traditional pottery and natural, unrefined materials. Featuring deep browns like #964B00, #8B4513, and #7B3F00, it's beautifully complemented by warmer, lighter tones such as #B06500, #D2B48C, and #CD853F. This palette is ideal for designers and developers seeking to create natural, rustic, and authentic experiences. It's versatile for conveying craftsmanship, warmth, and an organic feel across web interfaces, branding, and physical product designs, particularly those with an artisanal or handmade 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

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

secondary

#CD853F - A brighter, supportive orange-brown, ideal for secondary backgrounds or subtle 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 #964B00 is used for text on #D2B48C or #CD853F to meet WCAG contrast guidelines.
Avoid using #B06500 for text on #CD853F 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 · #CD853F · #B06500

Artisan Contrast

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

#8B4513 · #964B00 · #D2B48C

Rustic Blend

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

#CD853F · #B06500 · #8B4513

CSS variables

:root {
  --earthen-clay-crafts-1: #964B00;
  --earthen-clay-crafts-2: #B06500;
  --earthen-clay-crafts-3: #D2B48C;
  --earthen-clay-crafts-4: #8B4513;
  --earthen-clay-crafts-5: #CD853F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earthen-clay-crafts": {
        1: "#964B00",
        2: "#B06500",
        3: "#D2B48C",
        4: "#8B4513",
        5: "#CD853F",
      }
    }
  }
}

Hex values

Color 1#964B00

Color 2#B06500

Color 3#D2B48C

Color 4#8B4513

Color 5#CD853F

Accessibility

Contrast checker

1.4:1Fail

3.2:1AA18

1.1:1Fail

2.1:1Fail

1.4:1Fail

2.3:1Fail

1.6:1Fail

1.5:1Fail

3.2:1AA18

2.3:1Fail

3.6:1AA18

1.5:1Fail

1.1:1Fail

1.6:1Fail

3.6:1AA18

2.4:1Fail

2.1:1Fail

1.5:1Fail

2.4:1Fail

Similar palettes

More like Earthen Clay Crafts

Earthen Clay Crafts

See it in context.

Ready when you are.

Built with Earthen Clay Crafts.

How to use Earthen Clay Crafts

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clay & Sand

Artisan Contrast

Rustic Blend

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Earthen Clay Crafts