Back to palettes

Palette

Soft Clay Earthen

Gentle, unglazed tones of natural clay, perfect for creating a grounding and organic aesthetic.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#AD8774#C7AA93#E3D3C3#F5ECE6#8F6E5A

Palette guide

How to use Soft Clay Earthen

Overview

The "Soft Clay Earthen" palette presents a grounding collection of gentle, unglazed clay tones, perfect for designs seeking an organic, natural, and handcrafted aesthetic. Ranging from the deep, rich #8F6E5A and warm #AD8774 to the softer #C7AA93, light beige #E3D3C3, and airy #F5ECE6, this palette evokes a sense of calm and authenticity. Designers and developers can utilize these earthy hues to create inviting digital interfaces, artisanal branding, or print materials that emphasize sustainability, craftsmanship, and a connection to nature. It’s an excellent choice for projects requiring a warm, understated, and genuinely tactile feel.

Best used for

  • Artisanal craft and pottery branding
  • Sustainable and eco-conscious businesses
  • Natural beauty product packaging
  • Bohemian or rustic interior design
  • Organic food and beverage branding
  • Website design for handmade goods

Suggested color roles

primary

Utilize #F5ECE6 as a soft, natural background, providing a clean yet warm base for content.

secondary

Employ #E3D3C3 for secondary panels or cards, offering subtle visual separation with a gentle tone.

accent

Use #AD8774 or #8F6E5A for strong accents, such as calls-to-action or important headings, grounding the design.

background

The lightest shade, #F5ECE6, serves as an excellent, breathable background, reminiscent of natural linen or unbleached paper.

text

For optimal readability, use a deep brown or black text. #8F6E5A works well for headlines on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text; dark browns (#8F6E5A) work well for text on lighter backgrounds (#F5ECE6).
  • Avoid using lighter shades like #E3D3C3 for small body text, as contrast may be insufficient.
  • Always test color combinations with WCAG contrast tools to meet accessibility standards (AA or AAA).
  • Consider providing alternative text styles for users with visual impairments if light text on light background is used decoratively.

Recommended combinations

Natural Base

Ideal for soft, layered backgrounds and subtle UI elements, creating a gentle, organic feel.

#F5ECE6 · #E3D3C3 · #C7AA93

Earthy Contrast

Provides clear visual hierarchy, with darker browns for text or calls to action against a light base.

#F5ECE6 · #AD8774 · #8F6E5A

Warm Clay

Excellent for illustrations, textures, or branding that emphasizes the natural depth of clay.

#C7AA93 · #AD8774 · #8F6E5A

CSS variables

:root {
  --soft-clay-earthen-1: #AD8774;
  --soft-clay-earthen-2: #C7AA93;
  --soft-clay-earthen-3: #E3D3C3;
  --soft-clay-earthen-4: #F5ECE6;
  --soft-clay-earthen-5: #8F6E5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-clay-earthen": {
        1: "#AD8774",
        2: "#C7AA93",
        3: "#E3D3C3",
        4: "#F5ECE6",
        5: "#8F6E5A",
      }
    }
  }
}

Related searches

soft clay color paletteearthen natural designorganic brown beige palettehandcrafted ceramic colorsgrounding earthy tones

Palette colors

Hex values

Color 1#AD8774
·
Color 2#C7AA93
·
Color 3#E3D3C3
·
Color 4#F5ECE6
·
Color 5#8F6E5A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
2.8:1Fail
1.4:1Fail
2
1.5:1Fail
1.5:1Fail
1.9:1Fail
2.1:1Fail
3
2.2:1Fail
1.5:1Fail
1.3:1Fail
3.2:1AA18
4
2.8:1Fail
1.9:1Fail
1.3:1Fail
4:1AA18
5
1.4:1Fail
2.1:1Fail
3.2:1AA18
4:1AA18

Similar palettes

More like Soft Clay Earthen

View all earth