Palette

Desert Bloom Clay

Evokes the muted, sun-baked earth and subtle blossoms found in a desert landscape at dawn.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Bloom 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 Desert Bloom Clay.

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

Data visualization

#C88B7E#B06E5D#E2B38A#8F4C47#D3A292

Palette guide

How to use Desert Bloom Clay

Overview

The Desert Bloom Clay palette evokes the muted, sun-baked earth and subtle blossoms found in a desert landscape at dawn. This warm and earthy collection ranges from the deep, rustic #8F4C47 to the lighter, sandy #E2B38A, with harmonious mid-tones such as #C88B7E, #B06E5D, and #D3A292. Designers can leverage this palette to create a sense of natural warmth, rustic charm, and grounded elegance. Developers will find these earthy hues excellent for building user interfaces that feel organic, comforting, and visually balanced, making them perfect for artisan, heritage, or eco-conscious brands.

Best used for

Handcrafted pottery and ceramics websites
Southwestern-inspired home decor and textiles
Natural and organic skincare or beauty brands
Boutique coffee shops or artisanal food packaging
Cultural heritage or museum exhibition design
Rustic wedding stationery or event design

Suggested color roles

primary

#8F4C47 - A deep, rich terracotta, ideal for strong headings, primary buttons, or sophisticated brand elements, conveying authenticity and warmth.

secondary

#B06E5D - A warm, inviting clay brown, perfect for subheadings, navigation, or complementary graphics, adding depth.

accent

#E2B38A - Use this lightest sandy tone for subtle highlights, delicate text, or as a very light background for key information, adding brightness.

background

#D3A292 - A soft, warm, blush-toned background color for content areas, offering good readability for darker text.

text

A dark brown like #8F4C47 or a deep charcoal for main body text against lighter backgrounds. White or a very light cream works well against the darkest colors.

Accessibility notes

Ensure sufficient contrast for text on #E2B38A and #D3A292 by using darker colors like #8F4C47 or a dark brown.
#8F4C47 offers good contrast with lighter text such as white or #E2B38A.
Avoid placing similar mid-tones like #C88B7E and #B06E5D for text/background without careful testing.
Interactive elements should have clear focus indicators using a contrasting color from the palette.

Recommended combinations

Clay Horizon

A robust and earthy combination for artisan brands, rustic web design, or natural product packaging.

#8F4C47 · #E2B38A · #B06E5D

Desert Blush

Creates a soft, harmonious, and inviting feel, ideal for beauty products or gentle lifestyle content.

#D3A292 · #C88B7E · #E2B38A

Terra Bloom

Provides a balanced, grounding look for educational materials or nature-themed websites with a rustic touch.

#B06E5D · #8F4C47 · #C88B7E

CSS variables

:root {
  --desert-bloom-clay-2-1: #C88B7E;
  --desert-bloom-clay-2-2: #B06E5D;
  --desert-bloom-clay-2-3: #E2B38A;
  --desert-bloom-clay-2-4: #8F4C47;
  --desert-bloom-clay-2-5: #D3A292;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-bloom-clay-2": {
        1: "#C88B7E",
        2: "#B06E5D",
        3: "#E2B38A",
        4: "#8F4C47",
        5: "#D3A292",
      }
    }
  }
}

Hex values

Color 1#C88B7E

Color 2#B06E5D

Color 3#E2B38A

Color 4#8F4C47

Color 5#D3A292

Accessibility

Contrast checker

1.4:1Fail

1.5:1Fail

2.3:1Fail

1.3:1Fail

1.4:1Fail

2.1:1Fail

1.6:1Fail

1.8:1Fail

1.5:1Fail

2.1:1Fail

3.4:1AA18

1.2:1Fail

2.3:1Fail

1.6:1Fail

3.4:1AA18

2.8:1Fail

1.3:1Fail

1.8:1Fail

1.2:1Fail

2.8:1Fail

Similar palettes

More like Desert Bloom Clay