Back to palettes

Palette

Whispering Willow

Gentle and serene, like the quiet rustle of leaves by a placid water source under a soft light.

PastelCalm5 colors
More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A8C6AE#BCD9D0#E1F2E7#F3FDF5#8BB6B6

Palette guide

How to use Whispering Willow

Overview

The "Whispering Willow" palette embodies gentle serenity with its delicate blend of soft greens and cool teals. Key colors include the muted sage #A8C6AE, the airy #BCD9D0, and the almost ethereal #E1F2E7, complemented by the crisp, near-white #F3FDF5. The unique addition of #8BB6B6 introduces a calming teal depth, preventing the palette from becoming overly monochromatic. This collection is ideal for designers seeking to evoke a sense of peace, freshness, and understated elegance. It’s particularly effective for designs that require a light touch, promoting tranquility and a natural, soothing atmosphere.

Best used for

  • Spa and wellness brand identity
  • Baby product design and packaging
  • Gentle lifestyle blogs or apps
  • Serene interior decor inspiration
  • Eco-friendly fashion branding
  • Wedding invitations and stationery

Suggested color roles

primary

#A8C6AE can be used for softer headers, main navigation, or content blocks requiring a gentle presence.

secondary

#8BB6B6 provides a calming teal contrast, excellent for secondary titles, links, or decorative elements.

accent

#BCD9D0 works well for subtle highlights, interactive elements, or backgrounds for smaller content areas.

background

#F3FDF5 serves as an immaculate, light canvas, ensuring clarity and an airy feel.

text

A dark grey or charcoal is recommended for body text on #F3FDF5. For contrast on #A8C6AE, a near-white or #F3FDF5 can be used.

Accessibility notes

  • Exercise caution when pairing #BCD9D0 with #E1F2E7 for text, as contrast may be insufficient for readability.
  • Ensure text on #A8C6AE or #8BB6B6 meets WCAG AA standards for contrast, especially with lighter text.
  • Use a darker contrasting color for links or important information on light backgrounds like #F3FDF5.
  • For interactive elements, use distinct visual cues beyond color, such as underlines or bolding, for accessibility.

Recommended combinations

Gentle Breeze

Creates a light, airy design, perfect for soft branding or clean user interfaces.

#A8C6AE · #BCD9D0 · #F3FDF5

Teal Whisper

Introduces a cool teal pop, ideal for adding a touch of serene vibrancy to muted layouts.

#8BB6B6 · #A8C6AE · #E1F2E7

Soft Meadow

A near-monochromatic combination for extremely delicate backgrounds or subtle gradients.

#BCD9D0 · #E1F2E7 · #F3FDF5

CSS variables

:root {
  --whispering-willow-1: #A8C6AE;
  --whispering-willow-2: #BCD9D0;
  --whispering-willow-3: #E1F2E7;
  --whispering-willow-4: #F3FDF5;
  --whispering-willow-5: #8BB6B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-willow": {
        1: "#A8C6AE",
        2: "#BCD9D0",
        3: "#E1F2E7",
        4: "#F3FDF5",
        5: "#8BB6B6",
      }
    }
  }
}

Related searches

pastel green teal palettecalm nature color schemeserene design colorssoft elegant palettetranquil website aesthetic

Palette colors

Hex values

Color 1#A8C6AE
·
Color 2#BCD9D0
·
Color 3#E1F2E7
·
Color 4#F3FDF5
·
Color 5#8BB6B6
·

Accessibility

Contrast checker

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

Similar palettes

More like Whispering Willow

View all Pastel