Palette

Verdant Canopy Hush

Verdant and peaceful shades inspired by a hidden, thriving corner of a magical forest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Verdant Canopy Hush 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 Canopy Hush.

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

Data visualization

#2F3E46#52796F#84A98C#CAD2C5#E9EAE8

Palette guide

How to use Verdant Canopy Hush

Overview

The Verdant Canopy Hush palette offers a deeply serene and natural selection of greens and muted tones, perfect for conveying tranquility. With rich shades like the grounding `#2F3E46` and the balanced `#52796F`, this palette evokes a hidden, thriving corner of a magical forest. Designers can leverage the soft, light base of `#E9EAE8` and the delicate highlight of `#CAD2C5` to craft calming interfaces or brand identities. Its gentle progression from deep forest hues to airy neutrals makes it incredibly versatile for projects aiming for a sophisticated yet organic feel. Developers will find these hex codes easy to implement across various platforms for a consistent, peaceful user experience.

Best used for

Nature-themed branding and identity
Spa, wellness, or meditation app design
Eco-friendly product packaging
Interior design for tranquil spaces
Sustainable fashion lines
Website backgrounds for serene content

Suggested color roles

primary

Use `#52796F` as the dominant brand color, offering a balanced and calming presence.

secondary

Employ `#2F3E46` for deep accents, footers, or navigation, providing a strong, grounding contrast.

accent

Apply `#84A98C` for subtle highlights, interactive elements, or secondary calls to action, maintaining softness.

background

Utilize `#E9EAE8` as a clean, soft background, allowing content to breathe.

text

Choose `#2F3E46` for primary text on light backgrounds to ensure excellent readability and a sophisticated feel.

Accessibility notes

Ensure `#2F3E46` text on `#E9EAE8` or `#CAD2C5` backgrounds meets WCAG AA contrast standards.
Avoid using `#CAD2C5` or `#E9EAE8` for small text against each other due to insufficient contrast.
Use `#52796F` or `#84A98C` for larger headings or buttons on lighter backgrounds for better visibility.
Always test interactive elements for sufficient contrast to ensure usability for all users.

Recommended combinations

Deep & Light

Ideal for a strong visual hierarchy, pairing a dark base with a soft, airy highlight.

#2F3E46 · #52796F · #E9EAE8

Muted Harmony

Excellent for subtle gradients or layered designs that require a gentle, flowing transition.

#52796F · #84A98C · #CAD2C5

Airy Calm

Perfect for light mode interfaces or backgrounds where a minimalist, tranquil feel is desired.

#CAD2C5 · #E9EAE8 · #84A98C

CSS variables

:root {
  --verdant-canopy-hush-1: #2F3E46;
  --verdant-canopy-hush-2: #52796F;
  --verdant-canopy-hush-3: #84A98C;
  --verdant-canopy-hush-4: #CAD2C5;
  --verdant-canopy-hush-5: #E9EAE8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-canopy-hush": {
        1: "#2F3E46",
        2: "#52796F",
        3: "#84A98C",
        4: "#CAD2C5",
        5: "#E9EAE8",
      }
    }
  }
}

Hex values

Color 1#2F3E46

Color 2#52796F

Color 3#84A98C

Color 4#CAD2C5

Color 5#E9EAE8

Accessibility

Contrast checker

2.3:1Fail

4.2:1AA18

7.1:1AAA

9.2:1AAA

2.3:1Fail

1.9:1Fail

3.1:1AA18

4:1AA18

4.2:1AA18

1.9:1Fail

1.7:1Fail

2.2:1Fail

7.1:1AAA

3.1:1AA18

1.7:1Fail

1.3:1Fail

9.2:1AAA

4:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Verdant Canopy Hush

View all earth

Botanical Leaf Veins

Emerald Moss Canopy

Enchanted Forest Bloom

Enchanted Forest Glade

Enchanted Grove

Forest Canopy Gold