Palette

Desert Mirage

Evoking the subtle glow and earthy tones of a vast, tranquil desert landscape at sunset.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FAD089#F79C6F#B45F64#5F4B61#C7D8C6

Palette guide

How to use Desert Mirage

Overview

The Desert Mirage palette evokes the subtle glow and earthy tones of a vast, tranquil desert landscape at sunset. This unique collection features soft, warm hues like the pale yellow-orange #FAD089 and the inviting coral #F79C6F, balanced by the muted rose #B45F64. A deep, grounding purple-grey #5F4B61 adds sophistication, while the cool sage green #C7D8C6 introduces an unexpected, tranquil contrast. This palette is ideal for designers and developers seeking to create sophisticated, calming, and subtly vibrant experiences, from high-end branding to serene digital interfaces.

Best used for

Sophisticated branding for lifestyle or wellness products
Web design for tranquil spaces, spas, or meditation apps
Editorial design for art, culture, or travel magazines
Home decor and interior styling with a serene aesthetic
Packaging for luxury candles, teas, or artisanal goods
Digital interfaces that require a calming yet engaging user experience

Suggested color roles

primary

Use #F79C6F for main brand elements, headers, or prominent sections to convey warmth and approachability.

secondary

Apply #FAD089 for supporting content, subheadings, or as a soft background for lighter elements.

accent

Highlight key information or interactive elements with #B45F64, adding a sophisticated, muted pop.

background

Employ #C7D8C6 as a clean, expansive background, providing a cool, tranquil base for the warm tones.

text

Utilize #5F4B61 for body text and important labels, ensuring excellent readability and a grounding presence.

Accessibility notes

Ensure #5F4B61 text has sufficient contrast on #C7D8C6, #FAD089, or #F79C6F backgrounds.
Avoid using #FAD089 text on #F79C6F directly, as contrast might be insufficient.
When using #B45F64 or #5F4B61 as a background, ensure text is white or a very light cream for readability.
Carefully test combinations of the cool #C7D8C6 with the warm tones for contrast compliance.

Recommended combinations

Sunset Haze

Ideal for creating soft, dreamy gradients or expansive background visuals.

#FAD089 · #F79C6F · #C7D8C6

Mirage Depth

Perfect for grounding elements and providing sophisticated contrast with a cool touch.

#5F4B61 · #B45F64 · #C7D8C6

Tranquil Glow

Excellent for high-impact calls-to-action or dramatic visual compositions with depth.

#F79C6F · #B45F64 · #5F4B61

CSS variables

:root {
  --desert-mirage-1: #FAD089;
  --desert-mirage-2: #F79C6F;
  --desert-mirage-3: #B45F64;
  --desert-mirage-4: #5F4B61;
  --desert-mirage-5: #C7D8C6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-mirage": {
        1: "#FAD089",
        2: "#F79C6F",
        3: "#B45F64",
        4: "#5F4B61",
        5: "#C7D8C6",
      }
    }
  }
}

Hex values

Color 1#FAD089

Color 2#F79C6F

Color 3#B45F64

Color 4#5F4B61

Color 5#C7D8C6

Accessibility

Contrast checker

1.5:1Fail

3:1AA18

5.4:1AA

1:1Fail

1.5:1Fail

2.1:1Fail

3.7:1AA18

1.4:1Fail

3:1AA18

2.1:1Fail

1.8:1Fail

3:1Fail

5.4:1AA

3.7:1AA18

1.8:1Fail

5.3:1AA

1:1Fail

1.4:1Fail

3:1Fail

5.3:1AA

Similar palettes

More like Desert Mirage