Palette

Clay Pot Crafts

Rustic and warm, these colors capture the natural charm of handcrafted earthenware.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B27B5E#D4A98D#8C5840#F7EFE8#6F4232

Palette guide

How to use Clay Pot Crafts

Overview

The Clay Pot Crafts palette exudes the authentic charm of handcrafted earthenware, offering a rich tapestry of rustic and warm tones. Featuring the deep, robust #6F4232 and the inviting terracotta #B27B5E, this palette provides a solid foundation for designs rooted in tradition and natural beauty. The lighter, creamy #F7EFE8 serves as a perfect counterpoint, allowing for comfortable readability and a soft visual break. Designers can leverage these colors to evoke a sense of heritage and bespoke quality, while developers will appreciate the clear hierarchy possible when implementing these distinct yet harmonious hex codes across various UI components.

Best used for

Handmade goods e-commerce sites
Craft workshop branding
Artisan bakery or cafe designs
Home and garden enthusiast blogs
Packaging for natural products
Cultural heritage institution websites

Suggested color roles

primary

#6F4232 serves as an excellent deep primary, ideal for strong branding elements, navigation, or footer sections.

secondary

#B27B5E provides a softer, warm secondary, suitable for content panels, interactive elements, or headings.

accent

#8C5840 offers a slightly deeper, rich accent, perfect for call-to-actions, icons, or important highlights.

background

#F7EFE8 creates a clean, warm off-white background, ensuring high readability for most text colors.

text

For dark text on light backgrounds, #6F4232 or a deep charcoal works well. For light text on dark backgrounds, #F7EFE8 is recommended.

Accessibility notes

Ensure text in #6F4232 or #8C5840 has sufficient contrast against #F7EFE8 for body text.
Avoid placing #D4A98D text on #F7EFE8 backgrounds due to potential low contrast.
Use #F7EFE8 for text on darker backgrounds like #6F4232 or #8C5840 to meet accessibility standards.
The warmer brown tones might appear less distinct to individuals with certain forms of color blindness; use labels or icons to supplement color cues.

Recommended combinations

Rustic Foundation

Excellent for a main layout, with #6F4232 for structure, #B27B5E for content, and #F7EFE8 for backgrounds and text.

#6F4232 · #B27B5E · #F7EFE8

Crafted Detail

Suited for showcasing product details or galleries, offering subtle tonal shifts for visual interest.

#8C5840 · #D4A98D · #B27B5E

Warm Contrast

Use #F7EFE8 as a clean base, with #6F4232 for prominent text and #8C5840 for secondary accents or links.

#F7EFE8 · #6F4232 · #8C5840

CSS variables

:root {
  --clay-pot-crafts-1: #B27B5E;
  --clay-pot-crafts-2: #D4A98D;
  --clay-pot-crafts-3: #8C5840;
  --clay-pot-crafts-4: #F7EFE8;
  --clay-pot-crafts-5: #6F4232;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clay-pot-crafts": {
        1: "#B27B5E",
        2: "#D4A98D",
        3: "#8C5840",
        4: "#F7EFE8",
        5: "#6F4232",
      }
    }
  }
}

Hex values

Color 1#B27B5E

Color 2#D4A98D

Color 3#8C5840

Color 4#F7EFE8

Color 5#6F4232

Accessibility

Contrast checker

1.7:1Fail

1.6:1Fail

3.1:1AA18

2.4:1Fail

1.7:1Fail

2.8:1Fail

1.9:1Fail

3.9:1AA18

1.6:1Fail

2.8:1Fail

5.2:1AA

1.4:1Fail

3.1:1AA18

1.9:1Fail

5.2:1AA

7.4:1AAA

2.4:1Fail

3.9:1AA18

1.4:1Fail

7.4:1AAA

Similar palettes

More like Clay Pot Crafts

View all earth

Ancestral Clay Vessel

Bohemian Tapestry Craft