Back to palettes

Palette

Coastal Dunes Whisper

Gentle and serene, like the windswept textures and soft light of coastal sand dunes.

EarthNatural5 colors
More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Dunes Whisper 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 Coastal Dunes Whisper.

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

Data visualization

#9E9E88#BDBDA2#DADAA9#EDF3C6#F8FADE

Palette guide

How to use Coastal Dunes Whisper

Overview

The Coastal Dunes Whisper palette is gentle and serene, like the windswept textures and soft light of coastal sand dunes. This earthy collection ranges from the warm, light beige of #F8FADE and the airy #EDF3C6, through the balanced #DADAA9 and #BDBDA2, to the grounding green-grey of #9E9E88. Designers can leverage these shades to evoke a sense of natural tranquility, subtle elegance, and organic harmony. It’s an ideal choice for projects seeking an understated, soothing, and sophisticated aesthetic, from wellness brands to eco-conscious designs, providing a harmonious and inviting visual experience.

Best used for

  • Wellness and mindfulness apps
  • Eco-friendly product packaging
  • Nature-inspired web design
  • Botanical illustration backgrounds
  • Calm interior decor schemes
  • Sustainable fashion branding

Suggested color roles

primary

#BDBDA2 - A versatile, soft green-beige, excellent for main content areas or primary UI elements.

secondary

#DADAA9 - A lighter, airy tone, perfect for supporting sections, subtle headers, or background textures.

accent

#9E9E88 - The deepest, most grounding green-grey, ideal for subtle calls-to-action or important highlights.

background

#F8FADE - A very light, creamy off-white, providing a clean, expansive, and natural-feeling canvas.

text

Use a dark charcoal or black for body text, or #9E9E88 for legible headings against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter shades like #EDF3C6 with text, especially for smaller fonts.
  • Pair #F8FADE with #9E9E88 or a pure black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #DADAA9 on #EDF3C6 for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Soft Light

Creates a very light, airy foundation, perfect for clean, minimalist interfaces and subtle layering.

#F8FADE · #EDF3C6 · #DADAA9

Dune Depth

Provides a natural depth and grounding feel, ideal for headers, footers, or distinct content sections.

#DADAA9 · #BDBDA2 · #9E9E88

Calm Read

Offers clear text legibility on a light background, with a soft green-grey accent for visual interest.

#F8FADE · #9E9E88 · #BDBDA2

CSS variables

:root {
  --coastal-dunes-whisper-1: #9E9E88;
  --coastal-dunes-whisper-2: #BDBDA2;
  --coastal-dunes-whisper-3: #DADAA9;
  --coastal-dunes-whisper-4: #EDF3C6;
  --coastal-dunes-whisper-5: #F8FADE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dunes-whisper": {
        1: "#9E9E88",
        2: "#BDBDA2",
        3: "#DADAA9",
        4: "#EDF3C6",
        5: "#F8FADE",
      }
    }
  }
}

Related searches

dunes whisper palettenatural sand beige schemecalm earthy green designsubtle coastal colorsorganic neutral color palette

Palette colors

Hex values

Color 1#9E9E88
·
Color 2#BDBDA2
·
Color 3#DADAA9
·
Color 4#EDF3C6
·
Color 5#F8FADE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
2.4:1Fail
2.6:1Fail
2
1.4:1Fail
1.3:1Fail
1.7:1Fail
1.8:1Fail
3
1.9:1Fail
1.3:1Fail
1.3:1Fail
1.4:1Fail
4
2.4:1Fail
1.7:1Fail
1.3:1Fail
1.1:1Fail
5
2.6:1Fail
1.8:1Fail
1.4:1Fail
1.1:1Fail

Similar palettes

More like Coastal Dunes Whisper

View all Earth