Back to palettes

Palette

Muted Clay Pottery

A harmonious selection of soft, muted browns and beiges, reflecting the raw, honest beauty of artisan clay pottery.

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

#F0E8DD#D0BCAC#B09280#906A58#704738

Palette guide

How to use Muted Clay Pottery

Overview

The Muted Clay Pottery palette (version 2) presents a harmonious selection of soft, muted browns and beiges, reflecting the raw, honest beauty of artisan clay. Ranging from a delicate off-white (#F0E8DD) to a deep, grounding brown (#704738), with versatile mid-tones like #B09280 and #906A58, this collection offers a natural progression of earthy hues. It's an excellent choice for designers and developers aiming to create organic, warm, and comforting experiences that emphasize authenticity and handcrafted appeal across various platforms.

Best used for

  • Sustainable and organic product branding
  • Artisanal food and beverage packaging
  • Cozy and minimalist interior design
  • Educational content and e-learning platforms
  • Natural skincare and wellness websites
  • Handmade craft e-commerce stores

Suggested color roles

primary

Utilize #B09280 (mid-tone clay brown) for main content areas or prominent sections, offering warmth and stability.

secondary

Employ #906A58 (richer brown) for subheadings, navigation, or to add depth to UI elements.

accent

Incorporate #D0BCAC (light taupe) for subtle highlights, background textures, or decorative details.

background

Select #F0E8DD (soft cream) as a clean, airy base that allows other colors to stand out gently.

text

Choose #704738 (deepest brown) for all body text and important information, ensuring excellent readability and a natural feel.

Accessibility notes

  • Always ensure high contrast for text, especially when using light background colors like #F0E8DD.
  • Pair #F0E8DD and #D0BCAC with dark text colors, such as #906A58 or #704738, for optimal readability.
  • Avoid using #D0BCAC for small text on #F0E8DD due to insufficient contrast; reserve it for larger elements.
  • The darkest color, #704738, provides the best contrast for text against all lighter shades in this palette.

Recommended combinations

Deep Earth

Creates strong, grounded contrasts ideal for headers, footers, or important navigational elements.

#704738 · #906A58 · #F0E8DD

Soft Transition

Excellent for layered backgrounds, gradual gradients, or subtle visual hierarchies in content blocks.

#F0E8DD · #D0BCAC · #B09280

Warm Contrast

A versatile combination for body text and background, balancing warmth with clear readability.

#B09280 · #704738 · #906A58

CSS variables

:root {
  --muted-clay-pottery-2-1: #F0E8DD;
  --muted-clay-pottery-2-2: #D0BCAC;
  --muted-clay-pottery-2-3: #B09280;
  --muted-clay-pottery-2-4: #906A58;
  --muted-clay-pottery-2-5: #704738;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-clay-pottery-2": {
        1: "#F0E8DD",
        2: "#D0BCAC",
        3: "#B09280",
        4: "#906A58",
        5: "#704738",
      }
    }
  }
}

Related searches

clay pottery color schemenatural brown paletterustic earth tonesorganic design colorswarm beige brown

Palette colors

Hex values

Color 1#F0E8DD
·
Color 2#D0BCAC
·
Color 3#B09280
·
Color 4#906A58
·
Color 5#704738
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.9:1AA18
6.5:1AA
2
1.5:1Fail
1.6:1Fail
2.6:1Fail
4.3:1AA18
3
2.4:1Fail
1.6:1Fail
1.7:1Fail
2.7:1Fail
4
3.9:1AA18
2.6:1Fail
1.7:1Fail
1.7:1Fail
5
6.5:1AA
4.3:1AA18
2.7:1Fail
1.7:1Fail

Similar palettes

More like Muted Clay Pottery

View all earth