Palette

Potter's Wheel Clay

Earthy browns and grays, reflecting the raw, organic beauty of clay as it is shaped on a potter's wheel.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Potter's Wheel Clay 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 Potter's Wheel Clay.

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

Data visualization

#6D4C41#8D6E63#BCAAA4#D7CCC8#EDE7E3

Palette guide

How to use Potter's Wheel Clay

Overview

The Potter's Wheel Clay palette is a grounded and organic collection of earthy browns and grays, reflecting the raw, natural beauty of clay. This tactile scheme features the deep, rich brown of #6D4C41, the warm mid-brown of #8D6E63, the soft greige of #BCAAA4, and the very light, almost-white #EDE7E3. Designers can leverage these authentic hues to create rustic, handcrafted, and natural aesthetics. Developers will find them excellent for crafting warm user interfaces, organic backgrounds, or artisanal branding elements, ensuring a comforting and genuine digital presence that feels rooted and inviting.

Best used for

Craft and artisan product websites
Pottery studio branding and packaging
Organic food and beverage marketing
Rustic interior design concepts
Eco-friendly and sustainable brands
Educational content about nature or crafts

Suggested color roles

primary

#EDE7E3 - A very light, creamy off-white, ideal for expansive main backgrounds, providing a soft, natural canvas.

secondary

#D7CCC8 - A light greige, excellent for secondary content areas, card backgrounds, or subtle dividers, adding warmth.

accent

#6D4C41 - The deepest, richest brown, perfect for calls-to-action, important typography, or grounding elements that need a strong, natural presence.

background

#EDE7E3 - Offers a light, clean, and organic backdrop. #D7CCC8 can also be used for a slightly warmer, more substantial background.

text

For light backgrounds, a dark brown or charcoal (e.g., #3E2723) provides good contrast. For darker shades like #6D4C41, white or a very light cream text is essential for readability.

Accessibility notes

Ensure sufficient contrast between text and the very light background shades, especially #EDE7E3 and #D7CCC8.
The medium brown shades (#8D6E63, #BCAAA4) will require lighter text for readability; always check contrast ratios.
#6D4C41 requires white or very light text for optimal legibility against WCAG AA standards.
Avoid using similar earthy tones for interactive elements if they lack sufficient contrast from their surroundings.

Recommended combinations

Earthy Base

Creates a soft, harmonious, and natural base for backgrounds and secondary elements.

#EDE7E3 · #D7CCC8 · #BCAAA4

Clay & Craft

Provides a rich, grounded combination, perfect for footers, sidebars, or strong visual sections.

#8D6E63 · #BCAAA4 · #6D4C41

Organic Contrast

A balanced trio for impactful designs, using the deepest brown for key headings or buttons.

#EDE7E3 · #8D6E63 · #6D4C41

CSS variables

:root {
  --potter-s-wheel-clay-1: #6D4C41;
  --potter-s-wheel-clay-2: #8D6E63;
  --potter-s-wheel-clay-3: #BCAAA4;
  --potter-s-wheel-clay-4: #D7CCC8;
  --potter-s-wheel-clay-5: #EDE7E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "potter-s-wheel-clay": {
        1: "#6D4C41",
        2: "#8D6E63",
        3: "#BCAAA4",
        4: "#D7CCC8",
        5: "#EDE7E3",
      }
    }
  }
}

Hex values

Color 1#6D4C41

Color 2#8D6E63

Color 3#BCAAA4

Color 4#D7CCC8

Color 5#EDE7E3

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

4.8:1AA

6.2:1AA

1.6:1Fail

2.1:1Fail

2.9:1Fail

3.8:1AA18

3.4:1AA18

2.1:1Fail

1.4:1Fail

1.8:1Fail

4.8:1AA

2.9:1Fail

1.4:1Fail

1.3:1Fail

6.2:1AA

3.8:1AA18

1.8:1Fail

1.3:1Fail

Similar palettes

More like Potter's Wheel Clay