Palette

Desert Rose Mirage

A soft, shifting palette inspired by blooming desert flora against a sandy backdrop at sunset.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D4A373#E0B68C#F4EBD0#A87654#7F4F24

Palette guide

How to use Desert Rose Mirage

Overview

The Desert Rose Mirage palette offers a soft, shifting array of warm, sandy beiges and deeper, grounding browns, inspired by blooming desert flora against a sandy backdrop at sunset. It features the inviting #D4A373 and the lighter, luminous #E0B68C. The very pale #F4EBD0 serves as a beautiful, almost mirage-like highlight, while the robust #A87654 and the deep, anchoring #7F4F24 provide essential depth. This palette is ideal for designers seeking to evoke natural warmth, subtle sophistication, and a sense of calm. Its harmonious blend of earth tones is perfect for creating inviting and visually rich experiences across digital and print media.

Best used for

Natural product packaging
Earthy branding and logos
Spa and wellness website design
Photography with warm, natural light
Interior design for tranquil spaces
Editorial layouts with an organic feel

Suggested color roles

primary

Use #7F4F24 for strong headings, borders, or foundational elements, providing a deep, robust anchor.

secondary

Apply #D4A373 for larger content blocks or prominent UI components, offering a warm and balanced mid-tone.

accent

Employ #E0B68C for interactive elements or subtle highlights, adding a touch of soft, inviting glow.

background

Utilize #F4EBD0 for clean, airy backgrounds, ensuring good contrast for darker text and a luminous feel.

text

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

Accessibility notes

Ensure #7F4F24 text has strong contrast against #F4EBD0 and #E0B68C.
#E0B68C and #F4EBD0 may not provide enough contrast for text when paired closely.
The darker shades (#A87654, #7F4F24) will require light text (e.g., white) for readability.
Always test color contrast ratios for all text and interactive elements to meet WCAG standards.

Recommended combinations

Mirage Sunset

Creates a warm, inviting gradient, excellent for backgrounds or textural elements.

#D4A373 · #E0B68C · #7F4F24

Desert Glow

Perfect for designs needing a delicate yet grounded feel, such as soft branding or editorial details.

#F4EBD0 · #A87654 · #D4A373

Grounded Sand

Suitable for robust designs requiring clear hierarchy with a warm, natural touch.

#7F4F24 · #D4A373 · #A87654

CSS variables

:root {
  --desert-rose-mirage-2-1: #D4A373;
  --desert-rose-mirage-2-2: #E0B68C;
  --desert-rose-mirage-2-3: #F4EBD0;
  --desert-rose-mirage-2-4: #A87654;
  --desert-rose-mirage-2-5: #7F4F24;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-rose-mirage-2": {
        1: "#D4A373",
        2: "#E0B68C",
        3: "#F4EBD0",
        4: "#A87654",
        5: "#7F4F24",
      }
    }
  }
}

Hex values

Color 1#D4A373

Color 2#E0B68C

Color 3#F4EBD0

Color 4#A87654

Color 5#7F4F24

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

1.7:1Fail

3:1AA18

1.2:1Fail

1.6:1Fail

2.1:1Fail

3.7:1AA18