Back to palettes

Palette

Whispering Willow Trail

Soft, muted greens and greys inspired by the gentle rustle of willow leaves by a tranquil stream.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F7466#80968F#B1CCC6#DAE2E1#F4F6F5

Palette guide

How to use Whispering Willow Trail

Overview

The "Whispering Willow Trail" palette offers a sophisticated blend of soft, muted greens and greys, perfect for conveying a sense of calm and understated elegance. With its foundational shade #5F7466, transitioning through the gentle #80968F and the airy #B1CCC6, this palette culminates in the near-white tones of #DAE2E1 and #F4F6F5. It's an excellent choice for designers aiming to create serene, natural, and minimalist aesthetics. This palette provides a versatile foundation for projects requiring a subtle yet impactful visual presence, ideal for conveying professionalism and tranquility without being overtly vibrant.

Best used for

  • Minimalist website design
  • Eco-conscious brand identity
  • Serene interior design concepts
  • High-end natural product packaging
  • Healthcare or wellness applications
  • Architectural visualization

Suggested color roles

primary

#5F7466 serves as a grounding color for headers, important sections, or strong brand elements.

secondary

Use #80968F for subheadings, secondary information, or larger content blocks for a soft, cohesive feel.

accent

#B1CCC6 can highlight interactive elements, subtle iconography, or visual breaks without overpowering.

background

#F4F6F5 offers a clean, almost white base for content, ensuring maximum readability and an open feel.

text

A dark charcoal or black is recommended for text on lighter backgrounds like #F4F6F5. For dark backgrounds, #DAE2E1 works well.

Accessibility notes

  • Ensure sufficient contrast when using #5F7466 or #80968F for text on lighter backgrounds, especially #DAE2E1 or #F4F6F5.
  • Avoid low-contrast pairings like #B1CCC6 on #DAE2E1 for important information.
  • Consider using a darker text color (e.g., black) on #F4F6F5 for body text to meet WCAG AA standards.
  • Provide clear visual cues for interactive states using a distinct color or underline.

Recommended combinations

Muted Harmony

Creates a balanced, sophisticated look suitable for corporate or clean editorial designs.

#5F7466 · #80968F · #DAE2E1

Soft Trail

Excellent for light, airy interfaces where a gentle, almost monochromatic feel is desired.

#80968F · #B1CCC6 · #F4F6F5

Willow Whisper

A versatile trio offering depth, a soft mid-tone, and a light background for various applications.

#5F7466 · #B1CCC6 · #DAE2E1

CSS variables

:root {
  --whispering-willow-trail-1: #5F7466;
  --whispering-willow-trail-2: #80968F;
  --whispering-willow-trail-3: #B1CCC6;
  --whispering-willow-trail-4: #DAE2E1;
  --whispering-willow-trail-5: #F4F6F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-willow-trail": {
        1: "#5F7466",
        2: "#80968F",
        3: "#B1CCC6",
        4: "#DAE2E1",
        5: "#F4F6F5",
      }
    }
  }
}

Related searches

muted green grey palettecalm neutral colorsminimalist nature colorssubtle website color schemesserene branding palette

Palette colors

Hex values

Color 1#5F7466
·
Color 2#80968F
·
Color 3#B1CCC6
·
Color 4#DAE2E1
·
Color 5#F4F6F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3:1Fail
3.8:1AA18
4.6:1AA
2
1.6:1Fail
1.8:1Fail
2.4:1Fail
2.9:1Fail
3
3:1Fail
1.8:1Fail
1.3:1Fail
1.6:1Fail
4
3.8:1AA18
2.4:1Fail
1.3:1Fail
1.2:1Fail
5
4.6:1AA
2.9:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Whispering Willow Trail

View all neutral