Palette

Fired Clay Pottery

The warm, inviting shades of freshly fired pottery, reflecting the artistry of natural earth.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fired Clay Pottery 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 Fired Clay Pottery.

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

Data visualization

#B5651D#D28F47#F2B879#FAE2BE#BD7E53

Palette guide

How to use Fired Clay Pottery

Overview

The Fired Clay Pottery palette offers a warm, inviting selection of natural earth tones, evoking the artistry of handcrafted ceramics. This palette provides designers and developers with a grounded, organic feel, perfect for projects requiring warmth and authenticity. It features a rich clay brown (#B5651D), a softer terracotta (#D28F47), a light bisque (#F2B879), and a delicate cream (#FAE2BE). Anchored by a versatile medium brown (#BD7E53), these colors are ideal for creating a sense of natural comfort and rustic elegance across various digital and physical applications.

Best used for

Artisan and craft-based brand identities
Home decor and interior design visualizations
Natural and organic product packaging
Websites for pottery studios or handcrafted goods
Rustic wedding invitations and event themes
Food and beverage branding, especially coffee or bakery

Suggested color roles

primary

Use #B5651D as a strong, grounding primary color for headers, important buttons, or brand logos.

secondary

Apply #D28F47 for supporting elements, subheadings, or as a warmer accent to add depth without overpowering.

accent

Deploy #BD7E53 for subtle texture, decorative elements, or to introduce a slightly different brown tone for visual interest.

background

Utilize #FAE2BE as a soft, natural background, providing a clean canvas that complements the warmer clay tones.

text

Choose #B5651D or a deep charcoal for body text on lighter backgrounds like #FAE2BE to ensure excellent readability.

Accessibility notes

Ensure sufficient contrast between #FAE2BE background and text in #B5651D or other dark palette colors.
Avoid using lighter palette colors like #F2B879 for small text on #FAE2BE, as readability may be compromised.
Verify interactive elements (buttons, links) have clear visual states using contrasting colors from the palette.
Consider using a darker shade like #B5651D for outlines or borders to help define elements against similar mid-tones.

Recommended combinations

Earthy Base

Perfect for a core brand presence or website layout, offering strong contrast and natural warmth.

#B5651D · #FAE2BE · #D28F47

Warm Gradient

Creates a soft, inviting transition, suitable for background textures, illustrations, or subtle gradients.

#D28F47 · #F2B879 · #FAE2BE

Rustic Harmony

Combines different brown tones for a rich, textured look, ideal for accenting details or layered visuals.

#BD7E53 · #B5651D · #F2B879

CSS variables

:root {
  --fired-clay-pottery-1: #B5651D;
  --fired-clay-pottery-2: #D28F47;
  --fired-clay-pottery-3: #F2B879;
  --fired-clay-pottery-4: #FAE2BE;
  --fired-clay-pottery-5: #BD7E53;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fired-clay-pottery": {
        1: "#B5651D",
        2: "#D28F47",
        3: "#F2B879",
        4: "#FAE2BE",
        5: "#BD7E53",
      }
    }
  }
}

Hex values

Color 1#B5651D

Color 2#D28F47

Color 3#F2B879

Color 4#FAE2BE

Color 5#BD7E53

Accessibility

Contrast checker

1.6:1Fail

2.5:1Fail

3.4:1AA18

1.3:1Fail

1.6:1Fail

1.5:1Fail

2.2:1Fail

1.2:1Fail

2.5:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail