Palette

Willow Shade Canopy

Gentle, airy greens that mirror the delicate leaves and swaying grace of willow trees by water.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A2AE9D#BACDB0#D2E4CC#EDF5ED#7B8D76

Palette guide

How to use Willow Shade Canopy

Overview

The Willow Shade Canopy palette offers gentle, airy greens that mirror the delicate leaves and swaying grace of willow trees by water. This serene collection includes a muted Green-grey (#A2AE9D), a soft Pale Green (#BACDB0), a very light Mint Green (#D2E4CC), an almost white Pale Grey Green (#EDF5ED), and a deeper Darker Green-grey (#7B8D76). It's an ideal choice for designers aiming for a calm, minimalist, and sophisticated natural aesthetic. The subtle variations in green create a harmonious and tranquil atmosphere, perfect for projects requiring understated elegance and a connection to serene natural environments.

Best used for

Minimalist and eco-friendly branding
Wellness and mindfulness app interfaces
Serene home decor and interior design
Nature-inspired art and photography backdrops
Sophisticated textile and fashion design
Delicate stationery and wedding invitations

Suggested color roles

primary

Utilize #7B8D76 (Darker Green-grey) for foundational elements, bold headings, or a subtle brand anchor, providing grounding.

secondary

Apply #A2AE9D (Green-grey) for supporting content, subheadings, or background textures, maintaining a muted elegance.

accent

Introduce #BACDB0 (Pale Green) for delicate highlights, subtle icons, or interactive elements to add a touch of lightness.

background

Use #EDF5ED (Pale Grey Green) for clean, expansive backgrounds, creating an airy and almost invisible canvas.

text

For optimal readability, use a dark grey, charcoal, or #7B8D76 on lighter backgrounds, and white text on #7B8D76.

Accessibility notes

Text on lighter shades like #D2E4CC and #EDF5ED must be dark (e.g., black or #7B8D76) to meet contrast standards.
Avoid using #BACDB0 or #A2AE9D for small text on very light backgrounds as their muted tones may lead to poor readability.
Ensure sufficient contrast between adjacent light colors for users with low vision; rely on luminance differences.
Always test color combinations with accessibility checkers to confirm sufficient contrast ratios for all text and interactive elements.

Recommended combinations

Misty Canopy

Excellent for creating soft, ethereal backgrounds or large graphic elements, evoking a gentle, misty atmosphere.

#A2AE9D · #D2E4CC · #EDF5ED

Grounding Edge

Ideal for subtle branding or borders, combining a deeper green-grey with lighter shades for depth and sophistication.

#7B8D76 · #BACDB0 · #A2AE9D

Airy Calm

Perfect for light, minimalist designs, using the palest greens for a clean, serene aesthetic in UI or headers.

#EDF5ED · #D2E4CC · #BACDB0

CSS variables

:root {
  --willow-shade-canopy-1: #A2AE9D;
  --willow-shade-canopy-2: #BACDB0;
  --willow-shade-canopy-3: #D2E4CC;
  --willow-shade-canopy-4: #EDF5ED;
  --willow-shade-canopy-5: #7B8D76;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "willow-shade-canopy": {
        1: "#A2AE9D",
        2: "#BACDB0",
        3: "#D2E4CC",
        4: "#EDF5ED",
        5: "#7B8D76",
      }
    }
  }
}

Hex values

Color 1#A2AE9D

Color 2#BACDB0

Color 3#D2E4CC

Color 4#EDF5ED

Color 5#7B8D76

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

2.1:1Fail

1.5:1Fail

1.4:1Fail

1.3:1Fail

1.5:1Fail

2.1:1Fail

1.7:1Fail

1.3:1Fail

1.2:1Fail

2.7:1Fail

2.1:1Fail

1.5:1Fail

1.2:1Fail

3.2:1AA18

1.5:1Fail

2.1:1Fail

2.7:1Fail

3.2:1AA18

Similar palettes

More like Willow Shade Canopy

Willow Shade Canopy

See it in context.

Ready when you are.

Built with Willow Shade Canopy.

How to use Willow Shade Canopy

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Canopy

Grounding Edge

Airy Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Willow Shade Canopy