Back to palettes

Palette

Weeping Willow Serene

Soft and subdued greens, like the peaceful swaying branches of a weeping willow tree.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F775C#86A184#AED6AC#D1E8CF#ECF7E7

Palette guide

How to use Weeping Willow Serene

Overview

The Weeping Willow Serene palette embodies the gentle, peaceful sway of willow branches, offering a soft and subdued collection of natural greens. At its heart is the calm mid-tone green #86A184, beautifully supported by the fresher, lighter #AED6AC. The deepest shade, #5F775C, provides crucial grounding and strong contrast, while the nearly white #ECF7E7 offers an airy, clean background. This palette is ideal for designers creating tranquil, eco-friendly, or wellness-focused brands and interfaces. Developers can utilize its harmonious greens to build accessible, visually soothing experiences that promote a sense of calm and natural balance.

Best used for

  • Wellness and spa brand identity
  • Eco-friendly and sustainable product lines
  • Nature photography and artistic projects
  • Garden design and botanical themes
  • Meditation and mindfulness applications
  • Serene web environments and user interfaces

Suggested color roles

primary

Use #86A184 as a calm, mid-tone green for main content areas or a soothing brand presence.

secondary

Employ #AED6AC for lighter, fresh green accents in subheadings, secondary navigation, or backgrounds.

accent

Apply #5F775C for deeper, grounding green accents in important text, buttons, or graphical separators.

background

Utilize #ECF7E7 as a very light, airy base for content areas, ensuring excellent readability.

text

Choose #5F775C for primary body text, offering strong contrast and a natural, soothing feel. Charcoal or black also works.

Accessibility notes

  • Ensure #5F775C text on #ECF7E7 provides excellent contrast for all users.
  • Use white or #ECF7E7 for text on darker backgrounds like #5F775C or #86A184.
  • Avoid using #D1E8CF text on #ECF7E7 for small font sizes due to potential low contrast.
  • Test contrast ratios for all interactive elements, especially with the subtle variations of green.

Recommended combinations

Willow Depth

Creates layered, natural green tones, ideal for headers and main content blocks with depth.

#5F775C · #86A184 · #AED6AC

Serene Light

Offers an airy, soft, and gentle aesthetic, perfect for backgrounds and subtle UI elements.

#ECF7E7 · #D1E8CF · #AED6AC

Garden Contrast

Provides a strong base with light, fresh complements, suitable for clear calls-to-action and distinct sections.

#5F775C · #AED6AC · #ECF7E7

CSS variables

:root {
  --weeping-willow-serene-1: #5F775C;
  --weeping-willow-serene-2: #86A184;
  --weeping-willow-serene-3: #AED6AC;
  --weeping-willow-serene-4: #D1E8CF;
  --weeping-willow-serene-5: #ECF7E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weeping-willow-serene": {
        1: "#5F775C",
        2: "#86A184",
        3: "#AED6AC",
        4: "#D1E8CF",
        5: "#ECF7E7",
      }
    }
  }
}

Related searches

serene green paletteweeping willow colorscalm nature toneseco-friendly greengentle pastel greens

Palette colors

Hex values

Color 1#5F775C
·
Color 2#86A184
·
Color 3#AED6AC
·
Color 4#D1E8CF
·
Color 5#ECF7E7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3:1AA18
3.8:1AA18
4.4:1AA18
2
1.7:1Fail
1.7:1Fail
2.2:1Fail
2.6:1Fail
3
3:1AA18
1.7:1Fail
1.2:1Fail
1.5:1Fail
4
3.8:1AA18
2.2:1Fail
1.2:1Fail
1.2:1Fail
5
4.4:1AA18
2.6:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Weeping Willow Serene

View all earth
Jade Tea Ceremony
Japanese Tea Garden
Matcha Ceremonial Blend
Matcha Ceremony Peace
Matcha Tea Ceremony
Tranquil Bamboo Grove