Palette

Moonlit Desert Sands

A mysterious collection of golds and browns, evoking desert dunes under a lunar glow.

earthdark5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D4AF37#B8860B#8B4513#5C3D2E#2E1C0F

Palette guide

How to use Moonlit Desert Sands

Overview

The Moonlit Desert Sands palette evokes a mysterious collection of golds and browns, capturing the essence of desert dunes under a lunar glow. Featuring rich hues from the bright #D4AF37 (goldenrod) and #B8860B (dark goldenrod) to the deep #8B4513 (saddle brown), #5C3D2E (dark brown), and #2E1C0F (deep espresso), this palette is perfect for projects seeking warmth, luxury, and an adventurous spirit. Designers and developers can utilize its earthy yet luminous qualities to create impactful branding, immersive digital experiences, or sophisticated print materials that convey depth and timeless elegance.

Best used for

Luxury branding and high-end packaging
Historical or adventure-themed video games
Sophisticated website design for premium products
Cinematic visual design and storytelling
Earthy, rustic, or artisan product branding
Exotic travel agency marketing

Suggested color roles

primary

Utilize #2E1C0F as a deep, commanding base for backgrounds, navigation, or strong brand elements, providing a luxurious foundation.

secondary

Employ #5C3D2E for supporting content blocks, subheadings, or as a rich border, maintaining the palette's depth.

accent

Highlight key information, interactive elements, or decorative details with #D4AF37 to add a vibrant, moonlit gold accent.

background

The mid-tone #8B4513 can serve as a warm, inviting background for certain sections, offering a softer alternative to the darkest shades.

text

For dark backgrounds like #2E1C0F or #5C3D2E, #D4AF37 or a light cream provides excellent legibility. For #8B4513, #2E1C0F works well.

Accessibility notes

Ensure sufficient contrast when pairing #D4AF37 with #2E1C0F or #5C3D2E for optimal readability (WCAG AA minimum).
Avoid using similar mid-tones like #B8860B on #8B4513 for body text due to low contrast.
The darkest colors, #2E1C0F and #5C3D2E, offer good contrast on lighter shades like #D4AF37 for larger display text.
For interactive elements, ensure clear focus indicators that stand out effectively.

Recommended combinations

Golden Night

Ideal for luxurious hero sections, balancing deep mystery with a radiant highlight.

#2E1C0F · #D4AF37 · #8B4513

Dune Shadows

Perfect for creating layered, earthy compositions with a sophisticated gradient effect.

#5C3D2E · #B8860B · #2E1C0F

Rich Earth

Excellent for showcasing content with warm, inviting tones and a touch of opulence.

#D4AF37 · #8B4513 · #5C3D2E

CSS variables

:root {
  --moonlit-desert-sands-1: #D4AF37;
  --moonlit-desert-sands-2: #B8860B;
  --moonlit-desert-sands-3: #8B4513;
  --moonlit-desert-sands-4: #5C3D2E;
  --moonlit-desert-sands-5: #2E1C0F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-desert-sands": {
        1: "#D4AF37",
        2: "#B8860B",
        3: "#8B4513",
        4: "#5C3D2E",
        5: "#2E1C0F",
      }
    }
  }
}

Hex values

Color 1#D4AF37

Color 2#B8860B

Color 3#8B4513

Color 4#5C3D2E

Color 5#2E1C0F

Accessibility

Contrast checker

1.5:1Fail

3.4:1AA18

4.6:1AA

7.7:1AAA

1.5:1Fail

2.2:1Fail

3:1Fail

5:1AA

3.4:1AA18

2.2:1Fail

1.4:1Fail

2.3:1Fail

4.6:1AA

3:1Fail

1.4:1Fail

1.7:1Fail

7.7:1AAA

5:1AA

2.3:1Fail

1.7:1Fail

Similar palettes

More like Moonlit Desert Sands

View all earth

Desert Starlight Path

Evergreen Canopy Light

Industrial Forge Ember

Industrial Rust Patina

Molten Stone Texture

Monsoon Mire Deep