Back to palettes

Palette

Muted Clay Pottery

Earthy and grounded tones inspired by handcrafted pottery and sun-baked clay.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#CD853F#D2B48C#5F321B

Palette guide

How to use Muted Clay Pottery

Overview

The Muted Clay Pottery palette (version 1) offers earthy and grounded tones, inspired by handcrafted pottery and sun-baked clay. This collection features a rich saddle brown (#8B4513), a warm reddish-brown (#A0522D), and a lighter inviting brown (#CD853F). A soft tan (#D2B48C) and a very deep brown (#5F321B) round out the palette, providing both subtle highlights and strong foundational elements. It's an ideal choice for designers and developers aiming to convey authenticity, warmth, and a connection to nature in their projects, from digital interfaces to physical products.

Best used for

  • Outdoor and adventure brand identities
  • Rustic cafe and restaurant menus
  • Traditional craft and artisan websites
  • Autumnal themed digital content
  • Heritage brand storytelling
  • Natural food and beverage packaging

Suggested color roles

primary

Employ #CD853F (light brown) as a warm, inviting primary color for key information or interactive elements.

secondary

Use #A0522D (reddish-brown) for supportive content, subheadings, or to add character to design elements.

accent

Incorporate #D2B48C (soft tan) for delicate highlights, decorative patterns, or subtle background textures.

background

Choose #D2B48C (soft tan) as a gentle, warm backdrop that provides a clean yet natural canvas.

text

Select #5F321B (very deep brown) for all body text and critical information, ensuring strong, legible contrast.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #D2B48C with other light colors in the palette.
  • The lighter #CD853F will require a dark text color, such as #5F321B or a dark charcoal, for readability.
  • Avoid using #D2B48C for small text on similarly light backgrounds; it's best for larger elements or backgrounds.
  • The deepest color, #5F321B, provides excellent contrast for text against all lighter hues within this palette.

Recommended combinations

Rich Contrast

Ideal for strong headers, important call-to-action buttons, or clear navigational elements.

#5F321B · #CD853F · #8B4513

Earthy Depth

Creates a harmonious, layered look suitable for background sections or complex graphical compositions.

#8B4513 · #A0522D · #CD853F

Warm Accent

Perfect for highlighting specific content blocks, using the light tone as a background with contrasting text.

#D2B48C · #A0522D · #5F321B

CSS variables

:root {
  --muted-clay-pottery-1: #8B4513;
  --muted-clay-pottery-2: #A0522D;
  --muted-clay-pottery-3: #CD853F;
  --muted-clay-pottery-4: #D2B48C;
  --muted-clay-pottery-5: #5F321B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-clay-pottery": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#5F321B",
      }
    }
  }
}

Related searches

earthy brown color paletterustic pottery colorsnatural clay huesdeep terracotta toneswarm autumn browns

Palette colors

Hex values

Color 1#8B4513
·
Color 2#A0522D
·
Color 3#CD853F
·
Color 4#D2B48C
·
Color 5#5F321B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.4:1Fail
3.6:1AA18
1.5:1Fail
2
1.3:1Fail
1.9:1Fail
2.8:1Fail
1.9:1Fail
3
2.4:1Fail
1.9:1Fail
1.5:1Fail
3.6:1AA18
4
3.6:1AA18
2.8:1Fail
1.5:1Fail
5.4:1AA
5
1.5:1Fail
1.9:1Fail
3.6:1AA18
5.4:1AA

Similar palettes

More like Muted Clay Pottery

View all earth