Palette

Desert Bloom Clay

Warm, earthy reds and oranges inspired by the resilient blooms and rich clay of the desert landscape.

warmnatural5 colors

More warm 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

#BF7F63#D9A284#F2C7AD#E05D5D#A63D3D

Palette guide

How to use Desert Bloom Clay

Overview

The Desert Bloom Clay palette captures warm, earthy reds and oranges, inspired by the resilient blooms and rich clay of the desert landscape. This vibrant yet grounded collection ranges from the bold, deep red #A63D3D to the soft, sandy #F2C7AD, with inviting mid-tones such as #BF7F63, #D9A284, and the striking #E05D5D. Designers can leverage this palette to evoke natural warmth, passion, and a connection to raw, organic beauty. Developers will find these hues excellent for building user interfaces that feel authentic, energetic, and visually compelling, making them perfect for artisanal, culinary, or adventure-focused brands.

Best used for

Artisan food and beverage branding (spicy, robust flavors)
Southwestern-inspired fashion or accessories
Pottery and ceramics workshops or e-commerce
Travel blogs focusing on arid landscapes and culture
Rustic event design or wedding themes
Packaging for natural, earthy products

Suggested color roles

primary

#A63D3D - A deep, rich red, ideal for strong headings, primary calls-to-action, or brand elements needing warmth and power.

secondary

#E05D5D - A vibrant, energetic red, excellent for subheadings, key information, or secondary interactive elements, adding dynamism.

accent

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

background

#D9A284 - A warm, inviting, light terracotta background color for content areas, offering good readability for darker text.

text

A dark red like #A63D3D or a deep charcoal for main body text against lighter backgrounds. White or a very light cream works well against the darkest reds.

Accessibility notes

Ensure sufficient contrast for text on #F2C7AD and #D9A284 by using darker colors like #A63D3D or black.
#A63D3D offers good contrast with white or #F2C7AD text.
Avoid placing similar mid-tones like #BF7F63 and #D9A284 for text/background without careful testing.
Interactive elements should have clear focus indicators using a contrasting color from the palette.

Recommended combinations

Clay Bloom

A bold and natural combination for artisan brands, rustic web design, or impactful product packaging.

#A63D3D · #F2C7AD · #E05D5D

Desert Sunset

Creates a warm, harmonious, and inviting feel, ideal for culinary blogs or lifestyle content with an earthy twist.

#D9A284 · #BF7F63 · #E05D5D

Terra Rossa

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

#BF7F63 · #A63D3D · #D9A284

CSS variables

:root {
  --desert-bloom-clay-3-1: #BF7F63;
  --desert-bloom-clay-3-2: #D9A284;
  --desert-bloom-clay-3-3: #F2C7AD;
  --desert-bloom-clay-3-4: #E05D5D;
  --desert-bloom-clay-3-5: #A63D3D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-bloom-clay-3": {
        1: "#BF7F63",
        2: "#D9A284",
        3: "#F2C7AD",
        4: "#E05D5D",
        5: "#A63D3D",
      }
    }
  }
}

Hex values

Color 1#BF7F63

Color 2#D9A284

Color 3#F2C7AD

Color 4#E05D5D

Color 5#A63D3D

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

1.1:1Fail

1.9:1Fail

1.5:1Fail

1.4:1Fail

1.6:1Fail

2.8:1Fail

2.1:1Fail

1.4:1Fail

2.3:1Fail

4:1AA18

1.1:1Fail

1.6:1Fail

2.3:1Fail

1.8:1Fail

1.9:1Fail

2.8:1Fail

4:1AA18

1.8:1Fail

Similar palettes

More like Desert Bloom Clay