Palette

Desert Flower Moon

Captures the subtle beauty of resilient desert flora under the soft light of a moonlit sky.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7DC6F#D4AC02#E67E22#A04000#F0B27A

Palette guide

How to use Desert Flower Moon

Overview

The Desert Flower Moon palette captures the subtle, warm glow of desert flora under a moonlit sky, offering a unique blend of muted yellows and earthy oranges. Key colors like the soft #F7DC6F and the inviting #F0B27A create a natural, tranquil base. The palette is invigorated by the deeper, more vibrant #D4AC02 and the rich #A04000, perfect for adding depth and emphasis. This collection is ideal for designers seeking to evoke a sense of natural wonder and calm, suitable for environmental branding, serene web interfaces, or artistic illustrations that require a touch of understated warmth and earthy elegance.

Best used for

Nature-inspired branding
Serene website backgrounds
Eco-friendly product packaging
Artistic illustration
Yoga or meditation apps
Cultural heritage websites

Suggested color roles

primary

Use #F7DC6F as a gentle, luminous primary background or accent, mimicking soft moonlight.

secondary

Employ #F0B27A for secondary elements or large text blocks, providing a warm, inviting feel.

accent

Introduce #E67E22 as a vibrant accent for calls to action or key information, drawing attention effectively.

background

Apply #F7DC6F for light, airy backgrounds, ensuring other colors stand out with subtle warmth.

text

Utilize #A04000 for primary text, offering strong contrast against lighter shades, or a deep brown.

Accessibility notes

Ensure #A04000 is used for text on #F7DC6F or #F0B27A for optimal readability.
Avoid using #F7DC6F on #F0B27A for small text due to low contrast.
#E67E22 can be used for headings on #F7DC6F, but verify contrast for smaller text.
The dark #D4AC02 provides good contrast for text on #F7DC6F.

Recommended combinations

Moonlit Bloom

Creates a soft, natural glow for hero banners or subtle content dividers.

#F7DC6F · #F0B27A · #D4AC02

Desert Ember

Effective for strong calls to action, impactful imagery, or bold branding.

#E67E22 · #A04000 · #D4AC02

Warm Sands

Provides a harmonious, earthy backdrop for content with clear text hierarchy.

#F0B27A · #F7DC6F · #A04000

CSS variables

:root {
  --desert-flower-moon-1: #F7DC6F;
  --desert-flower-moon-2: #D4AC02;
  --desert-flower-moon-3: #E67E22;
  --desert-flower-moon-4: #A04000;
  --desert-flower-moon-5: #F0B27A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-flower-moon": {
        1: "#F7DC6F",
        2: "#D4AC02",
        3: "#E67E22",
        4: "#A04000",
        5: "#F0B27A",
      }
    }
  }
}

Hex values

Color 1#F7DC6F

Color 2#D4AC02

Color 3#E67E22

Color 4#A04000

Color 5#F0B27A

Accessibility

Contrast checker

1.6:1Fail

2.1:1Fail

4.8:1AA

1.4:1Fail

1.6:1Fail

1.3:1Fail

3:1AA18

1.2:1Fail

2.1:1Fail

1.3:1Fail

2.3:1Fail

1.5:1Fail

4.8:1AA

3:1AA18

2.3:1Fail

3.5:1AA18

1.4:1Fail

1.2:1Fail

1.5:1Fail

3.5:1AA18

Similar palettes

More like Desert Flower Moon

Desert Bloom Whispers