Palette

Wabi-Sabi Clay

A humble selection of muted grays and browns, embodying the raw, imperfect beauty of wabi-sabi clay art.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Wabi-Sabi 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 Wabi-Sabi Clay.

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

Data visualization

#DCDCDC#C0C0C0#BDB76B#8B7355#A52A2A

Palette guide

How to use Wabi-Sabi Clay

Overview

The Wabi-Sabi Clay palette embodies humble, rustic beauty with its collection of muted grays, earthy browns, and a touch of subtle warmth. Featuring soft #DCDCDC and #C0C0C0, an organic #BDB76B, a grounding #8B7355, and a deep #A52A2A, this collection is inspired by the raw, imperfect aesthetic of wabi-sabi pottery. It's perfect for designers and developers aiming to create a serene, natural, and authentic mood. This palette is ideal for conveying craftsmanship, sustainability, and a quiet appreciation for natural textures and understated elegance.

Best used for

Artisan craft websites
Pottery studio branding
Minimalist interior design blogs
Organic food and beverage packaging
Rustic home decor e-commerce
Tranquil meditation apps

Suggested color roles

primary

Use #BDB76B as a unique, earthy primary color for branding or key illustrative elements.

secondary

Apply #8B7355 for supporting content areas, providing depth and a natural feel.

accent

Reserve #A52A2A for subtle accents or important but understated highlights, adding a touch of richness.

background

Employ #DCDCDC as a light, airy background, allowing other colors to softly emerge.

text

For optimal readability, use a dark brown like #8B7355 or a charcoal grey for text on lighter backgrounds. White text can be used on #A52A2A.

Accessibility notes

Ensure sufficient contrast between #DCDCDC and #C0C0C0 for text or interactive elements.
The muted #BDB76B may require dark text (e.g., #8B7355 or charcoal) for good readability.
Avoid using light text on #BDB76B. Always check contrast ratios for all text pairings.
Prioritize darker text colors for body copy to maintain legibility across the lighter palette shades.

Recommended combinations

Earthy Harmony

Creates a soft, natural, and grounded feel, ideal for serene backgrounds and content.

#DCDCDC · #BDB76B · #8B7355

Rustic Contrast

Provides a subtle yet effective contrast, perfect for highlighting key information with a touch of warmth.

#C0C0C0 · #A52A2A · #8B7355

Clay Texture

Excellent for layered backgrounds or subtle UI elements, evoking a handcrafted, organic aesthetic.

#DCDCDC · #C0C0C0 · #BDB76B

CSS variables

:root {
  --wabi-sabi-clay-1: #DCDCDC;
  --wabi-sabi-clay-2: #C0C0C0;
  --wabi-sabi-clay-3: #BDB76B;
  --wabi-sabi-clay-4: #8B7355;
  --wabi-sabi-clay-5: #A52A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wabi-sabi-clay": {
        1: "#DCDCDC",
        2: "#C0C0C0",
        3: "#BDB76B",
        4: "#8B7355",
        5: "#A52A2A",
      }
    }
  }
}

Hex values

Color 1#DCDCDC

Color 2#C0C0C0

Color 3#BDB76B

Color 4#8B7355

Color 5#A52A2A

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

3.3:1AA18

5.2:1AA

1.3:1Fail

1.1:1Fail

2.5:1Fail

3.9:1AA18

1.5:1Fail

1.1:1Fail

2.2:1Fail

3.4:1AA18

3.3:1AA18

2.5:1Fail

2.2:1Fail

1.6:1Fail

5.2:1AA

3.9:1AA18

3.4:1AA18

1.6:1Fail

Similar palettes

More like Wabi-Sabi Clay