Back to palettes

Palette

Desert Clay Bloom

Sun-baked earth tones with a hint of dried desert flora, reflecting a resilient landscape.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D4A276#BF6B5D#F4C39E#B5876B#7B876D

Palette guide

How to use Desert Clay Bloom

Overview

The Desert Clay Bloom palette presents sun-baked earth tones with a hint of dried desert flora, reflecting a resilient landscape. This natural collection features the warm #D4A276 and the rustic #B5876B, complemented by the softer #F4C39E. A unique touch of muted green is found in #7B876D, while the deeper #BF6B5D adds a touch of subtle vibrancy. Designers and developers can utilize these colors to evoke a sense of natural beauty, understated strength, and organic charm. It's an excellent choice for projects requiring a warm, authentic, and subtly distinctive aesthetic.

Best used for

  • Eco-friendly product branding
  • Botanical and garden designs
  • Natural skincare packaging
  • Bohemian home decor websites
  • Sustainable fashion lines
  • Handcrafted pottery promotions

Suggested color roles

primary

#D4A276 - A warm, inviting clay-beige, excellent for main content areas or dominant graphic elements, offering a soft, natural base.

secondary

#BF6B5D - A muted, rustic rose-brown, providing a strong, grounding presence for navigation, footers, or important textual content.

accent

#7B876D - A soft, earthy sage green, perfect for subtle highlights, interactive states, or decorative flourishes, adding a unique natural contrast.

background

#F4C39E - A very light, warm peach-beige, serving as a clean, spacious backdrop that enhances readability and the natural feel.

text

#B5876B - A deep, warm brown, offering excellent readability for body text against lighter backgrounds, or use black for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast between #B5876B text and #F4C39E backgrounds for WCAG AA compliance.
  • Avoid using #D4A276 or #BF6B5D for small text on similar background shades, as contrast may be insufficient.
  • For critical information, pair the darkest color #B5876B with the lightest background #F4C39E.
  • The #7B876D green may require careful contrast checking when used with other mid-tones, especially for text.

Recommended combinations

Desert Flora

A unique, earthy contrast for headings or visual accents, reflecting desert plants against clay.

#BF6B5D · #7B876D · #D4A276

Clay Blossom

A soft, warm blend for layered UI elements or subtle branding accents, evoking gentle light.

#D4A276 · #F4C39E · #BF6B5D

Earthen Resilience

A versatile trio for extensive layouts, providing depth and natural warmth across sections.

#B5876B · #BF6B5D · #F4C39E

CSS variables

:root {
  --desert-clay-bloom-1: #D4A276;
  --desert-clay-bloom-2: #BF6B5D;
  --desert-clay-bloom-3: #F4C39E;
  --desert-clay-bloom-4: #B5876B;
  --desert-clay-bloom-5: #7B876D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-clay-bloom": {
        1: "#D4A276",
        2: "#BF6B5D",
        3: "#F4C39E",
        4: "#B5876B",
        5: "#7B876D",
      }
    }
  }
}

Related searches

desert clay green paletteearthy natural tonesrustic warm color schemedried flower palettesouthwest botanical colors

Palette colors

Hex values

Color 1#D4A276
·
Color 2#BF6B5D
·
Color 3#F4C39E
·
Color 4#B5876B
·
Color 5#7B876D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.4:1Fail
1.4:1Fail
1.7:1Fail
2
1.7:1Fail
2.4:1Fail
1.2:1Fail
1:1Fail
3
1.4:1Fail
2.4:1Fail
2:1Fail
2.4:1Fail
4
1.4:1Fail
1.2:1Fail
2:1Fail
1.2:1Fail
5
1.7:1Fail
1:1Fail
2.4:1Fail
1.2:1Fail

Similar palettes

More like Desert Clay Bloom

View all earth