Palette

Golden Dune Mirage

Soft, wind-swept hues of golden dunes under a gentle breeze, evoking serenity and vastness.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A58B6D#D0BB9F#F3E8CE#FAEBDC#8C7256

Palette guide

How to use Golden Dune Mirage

Overview

The Golden Dune Mirage palette evokes the soft, wind-swept hues of golden dunes under a gentle breeze, creating a sense of serenity and vastness. Ranging from the deep #8C7256 to the ethereal #FAEBDC, with key tones like #A58B6D and #F3E8CE, this palette offers a refined and calming aesthetic. It's perfectly suited for designers aiming to convey tranquility, natural elegance, and minimalist sophistication. This palette excels in applications where a soft, inviting, and subtly luxurious mood is paramount, from web design to interior decor concepts.

Best used for

Meditation apps or wellness retreat branding
Luxury minimalist fashion or jewelry websites
Interior design for serene, earthy living spaces
Photography portfolios focusing on natural landscapes
High-end skincare or organic product packaging
Wedding invitations or stationery with a natural, elegant theme

Suggested color roles

primary

Use #A58B6D as a soft yet defined primary for headings or key navigational elements, providing a grounding, sophisticated feel.

secondary

The lighter #D0BB9F works beautifully for subheadings, secondary buttons, or background elements, maintaining a gentle warmth.

accent

Employ the rich #8C7256 for subtle accents, borders, or important interactive states, adding depth and a touch of earthiness.

background

The very light #FAEBDC or #F3E8CE creates an expansive, airy, and calming background, ideal for minimalist designs.

text

A deep brown like #8C7256 or a soft charcoal (e.g., #4C4C4C) offers excellent readability against the very light background shades.

Accessibility notes

Ensure sufficient contrast for text on #FAEBDC and #F3E8CE; darker tones like #8C7256 or #A58B6D are essential.
Avoid using #D0BB9F for small text on #F3E8CE due to potential low contrast.
For interactive elements, use #8C7256 or #A58B6D to ensure they are clearly distinguishable.
Prioritize larger font sizes for lighter text against slightly darker backgrounds to aid readability.

Recommended combinations

Mirage Hues

Ideal for expansive backgrounds, subtle gradients, or large content areas, creating a light and airy ambiance.

#FAEBDC · #F3E8CE · #D0BB9F

Dune Shadows

Excellent for defining sections, footers, or navigation, adding grounded depth and visual structure.

#D0BB9F · #A58B6D · #8C7256

Calm Contrast

Suitable for high-impact text or call-to-action elements, ensuring clarity against the serene light background.

#FAEBDC · #A58B6D · #8C7256

CSS variables

:root {
  --golden-dune-mirage-1: #A58B6D;
  --golden-dune-mirage-2: #D0BB9F;
  --golden-dune-mirage-3: #F3E8CE;
  --golden-dune-mirage-4: #FAEBDC;
  --golden-dune-mirage-5: #8C7256;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-dune-mirage": {
        1: "#A58B6D",
        2: "#D0BB9F",
        3: "#F3E8CE",
        4: "#FAEBDC",
        5: "#8C7256",
      }
    }
  }
}

Hex values

Color 1#A58B6D

Color 2#D0BB9F

Color 3#F3E8CE

Color 4#FAEBDC

Color 5#8C7256

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

2.8:1Fail

1.4:1Fail

1.7:1Fail

1.5:1Fail

1.6:1Fail

2.4:1Fail

2.6:1Fail

1.5:1Fail

1:1Fail

3.7:1AA18