Back to palettes

Palette

Whispering Windswept

Soft, muted greens and grays that evoke the gentle movement of wind through tall grasses or mist.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DFE8E5#BDD5CE#9CBFB8#7B9C92#5A776D

Palette guide

How to use Whispering Windswept

Overview

The "Whispering Windswept" palette captures the essence of a serene, natural landscape with its gradient of soft, muted greens and greys. Starting with the very light #DFE8E5, it flows through the gentle #BDD5CE and the balanced #9CBFB8, deepening into the earthy #7B9C92 and the profound #5A776D. This palette is ideal for designers seeking to evoke a sense of organic movement and understated beauty. Its cohesive progression from light to dark allows for versatile application, creating designs that feel both grounded and airy, perfect for conveying tranquility and a connection to nature.

Best used for

  • Nature and outdoor lifestyle brands
  • Environmentally conscious businesses
  • Serene editorial layouts
  • Sustainable product design
  • Landscape architecture presentations
  • Zen garden-inspired visuals

Suggested color roles

primary

#5A776D provides a strong, grounding foundation for prominent headings, navigation, or footer elements.

secondary

#7B9C92 works well for subheadings, important textual content, or larger background panels, offering depth.

accent

#9CBFB8 can highlight interactive elements, subtle icons, or visual breaks without being overly bright.

background

#DFE8E5 offers a very light, airy canvas for most content, ensuring good readability and a soft feel.

text

A dark charcoal or black is recommended for body text on #DFE8E5. For dark backgrounds like #5A776D, #DFE8E5 provides excellent contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter shades like #BDD5CE or #9CBFB8 with text on #DFE8E5.
  • For interactive elements, ensure distinct hover and focus states using a color with higher contrast or an underline.
  • Text on #5A776D or #7B9C92 should be light (e.g., #DFE8E5) to meet WCAG AA readability standards.
  • Avoid using #9CBFB8 text on #BDD5CE for critical information due to low contrast.

Recommended combinations

Deep Roots

Creates a strong, natural presence with a light, readable background, suitable for branding.

#5A776D · #7B9C92 · #DFE8E5

Misty Greens

Ideal for soft, atmospheric designs, perfect for backgrounds, headers, or subtle visual layering.

#BDD5CE · #9CBFB8 · #DFE8E5

Windswept Gradient

Offers a smooth, natural transition between mid-tones, great for subtle UI elements or infographics.

#7B9C92 · #9CBFB8 · #BDD5CE

CSS variables

:root {
  --whispering-windswept-1: #DFE8E5;
  --whispering-windswept-2: #BDD5CE;
  --whispering-windswept-3: #9CBFB8;
  --whispering-windswept-4: #7B9C92;
  --whispering-windswept-5: #5A776D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-windswept": {
        1: "#DFE8E5",
        2: "#BDD5CE",
        3: "#9CBFB8",
        4: "#7B9C92",
        5: "#5A776D",
      }
    }
  }
}

Related searches

muted green grey palettenatural calm colorssubtle nature color schemeearthy serene brandingtranquil windswept aesthetic

Palette colors

Hex values

Color 1#DFE8E5
·
Color 2#BDD5CE
·
Color 3#9CBFB8
·
Color 4#7B9C92
·
Color 5#5A776D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.4:1Fail
3.9:1AA18
2
1.2:1Fail
1.3:1Fail
1.9:1Fail
3.2:1AA18
3
1.6:1Fail
1.3:1Fail
1.5:1Fail
2.5:1Fail
4
2.4:1Fail
1.9:1Fail
1.5:1Fail
1.6:1Fail
5
3.9:1AA18
3.2:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Whispering Windswept

View all neutral