Back to palettes

Palette

Whispering Winds

Soft, muted tones evoking the gentle hush of a breezy day and the quiet whisper of nature.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A5B4AA#CAD2C5#E8EDDF#F5F3EB#D0DDC8

Palette guide

How to use Whispering Winds

Overview

The "Whispering Winds" palette offers a sophisticated range of soft, muted greys and greens, evoking the gentle hush of a breezy day. This collection features the subtle grey-green #A5B4AA, the light and airy #CAD2C5, and the almost white #E8EDDF, complemented by the creamy #F5F3EB. The slightly deeper #D0DDC8 provides a gentle anchor, maintaining the palette's overall serene and understated character. It's an ideal choice for designers aiming to create a calm, minimalist, and natural aesthetic, perfect for conveying tranquility and a sense of refined simplicity in various applications.

Best used for

  • Zen-inspired interior design
  • Sustainable fashion branding
  • Mindful living blogs or apps
  • High-end cosmetic packaging
  • Architectural rendering backdrops
  • Serene photography displays

Suggested color roles

primary

#A5B4AA can serve as a soft, grounding color for headers, main navigation, or important content blocks.

secondary

#D0DDC8 provides a slightly lighter yet substantial tone, suitable for secondary titles or large background elements.

accent

#CAD2C5 works well for subtle highlights, interactive elements, or as a gentle divider.

background

#F5F3EB offers a warm, creamy off-white base, ensuring excellent readability and an inviting feel.

text

A dark charcoal or black is recommended for body text on #F5F3EB. For contrast on #A5B4AA, #F5F3EB is suitable.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter shades like #CAD2C5 or #E8EDDF with text on #F5F3EB.
  • For critical information, always use a darker, highly contrasting text color on light backgrounds.
  • Interactive elements should have clear visual cues in addition to color, such as hover states or underlines.
  • Avoid using #E8EDDF text on #CAD2C5 for essential content due to insufficient contrast.

Recommended combinations

Gentle Haze

Creates a soft, atmospheric design, perfect for backgrounds or understated branding.

#A5B4AA · #CAD2C5 · #F5F3EB

Windblown Calm

A very light, almost monochromatic blend for ultra-clean interfaces or delicate details.

#D0DDC8 · #E8EDDF · #F5F3EB

Subtle Depth

Offers a gentle progression of tones, providing depth without sacrificing the palette's soft nature.

#A5B4AA · #D0DDC8 · #E8EDDF

CSS variables

:root {
  --whispering-winds-1: #A5B4AA;
  --whispering-winds-2: #CAD2C5;
  --whispering-winds-3: #E8EDDF;
  --whispering-winds-4: #F5F3EB;
  --whispering-winds-5: #D0DDC8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-winds": {
        1: "#A5B4AA",
        2: "#CAD2C5",
        3: "#E8EDDF",
        4: "#F5F3EB",
        5: "#D0DDC8",
      }
    }
  }
}

Related searches

muted grey green palettecalm neutral colorsserene minimalist aestheticsubtle earthy tonestranquil natural branding

Palette colors

Hex values

Color 1#A5B4AA
·
Color 2#CAD2C5
·
Color 3#E8EDDF
·
Color 4#F5F3EB
·
Color 5#D0DDC8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.8:1Fail
1.9:1Fail
1.5:1Fail
2
1.4:1Fail
1.3:1Fail
1.4:1Fail
1.1:1Fail
3
1.8:1Fail
1.3:1Fail
1.1:1Fail
1.2:1Fail
4
1.9:1Fail
1.4:1Fail
1.1:1Fail
1.3:1Fail
5
1.5:1Fail
1.1:1Fail
1.2:1Fail
1.3:1Fail

Similar palettes

More like Whispering Winds

View all neutral
Cloudy Day Serene
Dusky Bloom Hues
Dusky Cloud Blanket
Pebble Shore Calm
Quiet Morning Fog
Ancient Grove Hush