Palette

Whispering Dune Wind

A tranquil collection of sandy beiges and warm browns, evoking the soft, shifting sands of a desert dune.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Dune Wind 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 Whispering Dune Wind.

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

Data visualization

#F5DEB3#DEB887#DAA520#A0522D#8B4513

Palette guide

How to use Whispering Dune Wind

Overview

The Whispering Dune Wind palette is a tranquil collection of sandy beiges and warm browns, evoking the soft, shifting sands of a desert dune. Featuring inviting shades like the bright sand of #F5DEB3, the classic beige of #DEB887, and the rich golden brown of #DAA520, this palette offers a grounded and natural aesthetic. The deeper, robust browns, #A0522D and #8B4513, add crucial depth and warmth, making it versatile for designs that aim to be both serene and strong. It's an excellent choice for conveying natural beauty, warmth, and an understated elegance.

Best used for

Rustic interior design and home staging
Coffee shop and artisanal food branding
Outdoor gear and adventure travel websites
Historical or heritage-themed projects
Natural product packaging and branding
Websites with an earthy, robust aesthetic

Suggested color roles

primary

Utilize #DEB887 as a balanced, earthy base for main content areas, offering a versatile foundation.

secondary

Apply #DAA520 for supporting elements, subheadings, or to introduce a vibrant yet natural accent.

accent

Employ #8B4513 for strong call-to-actions, important highlights, or grounding visual anchors.

background

The lightest shade, #F5DEB3, is perfect for spacious page backgrounds, creating an airy and natural feel.

text

Use #8B4513 for headings and body text to ensure excellent readability against lighter shades, or a deep charcoal for general text.

Accessibility notes

Ensure sufficient contrast between light background colors (e.g., #F5DEB3) and text.
The deep #8B4513 and #A0522D provide excellent contrast for text on all lighter palette colors.
Be mindful of contrast when using #DAA520 for text on #DEB887; test for readability.
Test all text and background color combinations to meet WCAG contrast guidelines.

Recommended combinations

Dune Horizon

Ideal for hero sections or branding elements, representing a sunlit desert landscape.

#F5DEB3 · #DEB887 · #DAA520

Earthy Depth

Excellent for defining content blocks, card elements, or navigation areas with strong visual weight.

#A0522D · #8B4513 · #DEB887

Golden Ground

Perfect for high-contrast accents, call-to-action buttons, or iconography.

#DAA520 · #F5DEB3 · #A0522D

CSS variables

:root {
  --whispering-dune-wind-1: #F5DEB3;
  --whispering-dune-wind-2: #DEB887;
  --whispering-dune-wind-3: #DAA520;
  --whispering-dune-wind-4: #A0522D;
  --whispering-dune-wind-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-dune-wind": {
        1: "#F5DEB3",
        2: "#DEB887",
        3: "#DAA520",
        4: "#A0522D",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#F5DEB3

Color 2#DEB887

Color 3#DAA520

Color 4#A0522D

Color 5#8B4513

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

4.3:1AA18

5.4:1AA

1.4:1Fail

1.2:1Fail

3:1AA18

3.8:1AA18

1.7:1Fail

1.2:1Fail

2.5:1Fail

3.2:1AA18

4.3:1AA18

3:1AA18

2.5:1Fail

1.3:1Fail

5.4:1AA

3.8:1AA18

3.2:1AA18

1.3:1Fail

Similar palettes

More like Whispering Dune Wind

View all earth

Arid Blossom Mirage

Desert Dune Whisper

Desert Sunbaked Earth

Agave Spire Dawn

Arid Sands Bloom

Canyon Bloom Whisper