Palette

Desert Rose Bloom

Subtle, warm tones inspired by resilient desert flowers against sunbaked earth.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D4B69E#C99A8E#A06B6B#7F4F4F#5F3F3F

Palette guide

How to use Desert Rose Bloom

Overview

The Desert Rose Bloom palette offers a rich, progressive range of earthy, muted warm tones, inspired by resilient desert flowers against sunbaked earth. It begins with the soft, inviting #D4B69E, moving through the warmer #C99A8E and the distinct rosy brown of #A06B6B. The palette deepens significantly with the robust #7F4F4F and culminates in the strong, grounded #5F3F3F. This collection is perfect for designers seeking a natural, sophisticated, and slightly rugged aesthetic. It provides excellent depth and warmth, ideal for creating a sense of organic luxury or a comforting, established presence in digital or print media.

Best used for

Earthy brand identity design
Rustic or vintage-inspired websites
Interior design for cozy spaces
Packaging for artisanal goods
Photography portfolios with natural subjects
Editorial design for organic living

Suggested color roles

primary

Use #5F3F3F for strong headings, navigation, or foundational elements, providing a deep, anchoring presence.

secondary

Apply #7F4F4F for larger content blocks or prominent UI components, offering a rich, warm supporting tone.

accent

Employ #C99A8E for interactive elements or subtle highlights, providing a welcoming, soft blush.

background

Utilize #D4B69E for clean, warm backgrounds that offer good contrast for darker text, maintaining an inviting feel.

text

For optimal readability, use #5F3F3F for body text on lighter backgrounds, or a crisp white/off-white on the darkest shades.

Accessibility notes

Ensure #5F3F3F text has sufficient contrast against #D4B69E or #C99A8E.
#D4B69E and #C99A8E may not provide enough contrast for text when paired closely.
The darker shades (#7F4F4F, #5F3F3F) will require light text (e.g., white) for readability.
Always test color combinations for WCAG compliance, especially for critical information.

Recommended combinations

Sunbaked Earth

Creates a warm, natural gradient, ideal for backgrounds or layered graphic elements.

#D4B69E · #A06B6B · #5F3F3F

Muted Rose

Perfect for designs needing a sophisticated yet subtle focal point, like header accents.

#C99A8E · #7F4F4F · #D4B69E

Deep Bloom

Suitable for robust branding or UI elements where depth and warmth are key.

#5F3F3F · #A06B6B · #C99A8E

CSS variables

:root {
  --desert-rose-bloom-5-1: #D4B69E;
  --desert-rose-bloom-5-2: #C99A8E;
  --desert-rose-bloom-5-3: #A06B6B;
  --desert-rose-bloom-5-4: #7F4F4F;
  --desert-rose-bloom-5-5: #5F3F3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-rose-bloom-5": {
        1: "#D4B69E",
        2: "#C99A8E",
        3: "#A06B6B",
        4: "#7F4F4F",
        5: "#5F3F3F",
      }
    }
  }
}

Hex values

Color 1#D4B69E

Color 2#C99A8E

Color 3#A06B6B

Color 4#7F4F4F

Color 5#5F3F3F

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

3.5:1AA18

4.8:1AA

1.3:1Fail

1.8:1Fail

2.7:1Fail

3.7:1AA18