Back to palettes

Palette

Verdant Willow Shade

Lush greens from a tranquil willow canopy, capturing nature's serene embrace and peaceful quiet.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D9ECC7#B7D9A5#8EB87B#6D9A5E#4A6E3F

Palette guide

How to use Verdant Willow Shade

Overview

The Verdant Willow Shade palette brings forth a tranquil collection of natural greens, reminiscent of a peaceful willow canopy. Ranging from the airy lightness of #D9ECC7 and #B7D9A5 to the grounding depth of #4A6E3F, this palette offers a seamless gradient for organic and refreshing designs. Mid-tones like #8EB87B and #6D9A5E provide excellent versatility for building visual hierarchy. Ideal for projects seeking to evoke freshness, serenity, and a deep connection to nature, this guide assists designers in creating harmonious visual experiences. Developers can leverage these hues to craft user interfaces that feel calm, inviting, and inherently natural.

Best used for

  • Sustainable product branding
  • Wellness apps and websites
  • Botanical garden promotions
  • Nature-themed interior design concepts
  • Organic food packaging
  • Environmental non-profit materials

Suggested color roles

primary

Utilize #4A6E3F as a robust primary color for main branding, large sections, or navigation, providing a deep, natural anchor.

secondary

Employ #6D9A5E for supporting elements, subheadings, or graphical accents, offering a rich, complementary tone.

accent

Use #8EB87B for calls-to-action, interactive elements, or key highlights, its fresh tone drawing attention effectively.

background

Apply #D9ECC7 for clean, bright backgrounds, ensuring content is highly readable and the overall feel remains light.

text

For dark text on light backgrounds, use a deep charcoal or black. For headings on lighter greens, #4A6E3F provides excellent contrast.

Accessibility notes

  • Ensure sufficient contrast between #4A6E3F or #6D9A5E and #D9ECC7 for text readability.
  • Avoid using #B7D9A5 on #D9ECC7 for small text, as the contrast may be insufficient for WCAG AA standards.
  • Prioritize high contrast for interactive elements, especially when using lighter greens for backgrounds.
  • Always test text and background color pairings using a contrast checker to meet accessibility guidelines.

Recommended combinations

Canopy Depths

Excellent for creating depth in UI, main headers, or brand storytelling elements.

#4A6E3F · #6D9A5E · #D9ECC7

Fresh Growth

Ideal for refreshing UI components, illustrations, or content blocks requiring a light, airy feel.

#8EB87B · #B7D9A5 · #D9ECC7

Tranquil Grove

Provides a balanced, natural look suitable for sections requiring both depth and gentle highlights.

#6D9A5E · #4A6E3F · #B7D9A5

CSS variables

:root {
  --verdant-willow-shade-1: #D9ECC7;
  --verdant-willow-shade-2: #B7D9A5;
  --verdant-willow-shade-3: #8EB87B;
  --verdant-willow-shade-4: #6D9A5E;
  --verdant-willow-shade-5: #4A6E3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-willow-shade": {
        1: "#D9ECC7",
        2: "#B7D9A5",
        3: "#8EB87B",
        4: "#6D9A5E",
        5: "#4A6E3F",
      }
    }
  }
}

Related searches

willow green color palettetranquil nature colorsfresh green design palettemossy green color schemesnatural earth tone greens

Palette colors

Hex values

Color 1#D9ECC7
·
Color 2#B7D9A5
·
Color 3#8EB87B
·
Color 4#6D9A5E
·
Color 5#4A6E3F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
2.6:1Fail
4.7:1AA
2
1.2:1Fail
1.5:1Fail
2.1:1Fail
3.8:1AA18
3
1.8:1Fail
1.5:1Fail
1.4:1Fail
2.6:1Fail
4
2.6:1Fail
2.1:1Fail
1.4:1Fail
1.8:1Fail
5
4.7:1AA
3.8:1AA18
2.6:1Fail
1.8:1Fail

Similar palettes

More like Verdant Willow Shade

View all earth
Botanical Herbarium Shade
Botanical Study Greens
Emerald Enclave Moss
Emerald Forest Depths
Emerald Moss Canopy
Enchanted Forest Lumina