Back to palettes

Palette

Earthen Clay Pottery

Inspired by traditional ceramics, this palette offers a grounding blend of warm, natural earth tones.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A382B#7F5539#AE8A60#CDB49C#E5DCCF

Palette guide

How to use Earthen Clay Pottery

Overview

The Earthen Clay Pottery palette, inspired by traditional ceramics, offers a grounding blend of warm, natural earth tones. Ranging from the deep #5A382B to the light #E5DCCF, and including balanced mid-tones like #7F5539, #AE8A60, and #CDB49C, this palette exudes a natural, rustic, and comforting mood. Designers and developers can leverage these colors to create sophisticated, organic, or calm experiences. It's ideal for projects aiming to convey heritage, craftsmanship, and an authentic feel across web interfaces, branding, and physical product designs, particularly those with an artisanal or traditional aesthetic.

Best used for

  • Traditional pottery branding
  • Rustic interior design
  • Earthy web design themes
  • Organic food and beverage packaging
  • Handmade craft e-commerce
  • Art and antique restoration

Suggested color roles

primary

#7F5539 - A balanced, warm medium brown, excellent for primary UI elements or brand accents.

secondary

#AE8A60 - A lighter, supportive brown-beige, ideal for secondary backgrounds or subtle highlights.

accent

#5A382B - The deepest, most grounding dark brown, perfect for impactful accents or calls-to-action.

background

#E5DCCF - The lightest, almost off-white, providing a clean and natural canvas.

text

#5A382B - A deep, readable dark brown, ensuring strong contrast on lighter palette colors.

Accessibility notes

  • Ensure #5A382B is used for text on #E5DCCF or #CDB49C to meet WCAG contrast guidelines.
  • Avoid using #AE8A60 for text on #CDB49C due to insufficient contrast.
  • The darkest shades provide excellent contrast for text on any of the lighter palette colors.
  • Test all text/background color pairs with WCAG 2.1 AA guidelines, especially for small text.

Recommended combinations

Clay Layers

Soft, layered backgrounds, content cards, or subtle graphic elements to mimic aged pottery.

#E5DCCF · #CDB49C · #AE8A60

Potter's Contrast

High-contrast headings, buttons, or key information against a clean, light backdrop.

#5A382B · #7F5539 · #E5DCCF

Rustic Harmony

Creating balanced content blocks or decorative elements with an organic, traditional feel.

#AE8A60 · #CDB49C · #7F5539

CSS variables

:root {
  --earthen-clay-pottery-1: #5A382B;
  --earthen-clay-pottery-2: #7F5539;
  --earthen-clay-pottery-3: #AE8A60;
  --earthen-clay-pottery-4: #CDB49C;
  --earthen-clay-pottery-5: #E5DCCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earthen-clay-pottery": {
        1: "#5A382B",
        2: "#7F5539",
        3: "#AE8A60",
        4: "#CDB49C",
        5: "#E5DCCF",
      }
    }
  }
}

Related searches

earthen clay color palettenatural pottery tonesrustic brown schemeterracotta earth colorswarm clay aesthetic

Palette colors

Hex values

Color 1#5A382B
·
Color 2#7F5539
·
Color 3#AE8A60
·
Color 4#CDB49C
·
Color 5#E5DCCF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.2:1AA18
5.2:1AA
7.6:1AAA
2
1.6:1Fail
2:1Fail
3.3:1AA18
4.7:1AA
3
3.2:1AA18
2:1Fail
1.6:1Fail
2.3:1Fail
4
5.2:1AA
3.3:1AA18
1.6:1Fail
1.5:1Fail
5
7.6:1AAA
4.7:1AA
2.3:1Fail
1.5:1Fail

Similar palettes

More like Earthen Clay Pottery

View all earth
Ancient Clay Vessel
Ceramic Pot Earth
Desert Clay Hills
Earthen Clay Crafts
Earthen Claypot
Earthy Artisan Clay