Palette

Verdant Canopy Hush

A tranquil array of deep greens reflecting the peaceful stillness of a rainforest after a fresh rain.

earthcalm5 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

#0A2A1A#224838#4A7F66#7FB39D#B3D9C9

Palette guide

How to use Verdant Canopy Hush

Overview

The Verdant Canopy Hush palette captures the tranquil stillness of a rainforest after a fresh rain, offering a soothing and sophisticated collection of deep, muted greens. It ranges from a profound, almost teal-green #0A2A1A, through balanced mid-tones like #224838 and #4A7F66, to the softer, misty #7FB39D and the airy #B3D9C9. This palette is ideal for designs that aim to convey peace, natural elegance, and a sense of calm. Developers can craft immersive interfaces that feel established and premium, while designers will find these shades excellent for branding that conveys luxury, tranquility, or a strong connection to nature's quietude.

Best used for

Luxury eco-resorts
Spa and wellness brands
High-end natural product packaging
Dark mode UI themes with a cool green touch
Environmental non-profit branding
Serene photography portfolio websites

Suggested color roles

primary

A very deep, sophisticated teal-green #0A2A1A, excellent for strong brand presence, backgrounds in dark mode, or impactful headings.

secondary

A rich, deep forest green #224838, suitable for subheadings, secondary calls to action, or significant informational blocks.

accent

A balanced, muted green #4A7F66, ideal for subtle highlights, interactive elements, or decorative details that require a gentle pop.

background

A very light, muted blue-green #B3D9C9, providing a soft, clean canvas that allows content to breathe and feel natural.

text

For body text on #B3D9C9, a dark charcoal or black offers optimal readability. Use #0A2A1A for headings to establish clear hierarchy and strong contrast.

Accessibility notes

#0A2A1A and #224838 provide excellent contrast for text on #B3D9C9 or white backgrounds.
#4A7F66 and #7FB39D may need to be used with larger text sizes or bolding to ensure WCAG AA contrast on light backgrounds.
Ensure interactive elements have sufficient contrast in all states (normal, hover, focus).
Always use a contrast checker to validate readability for all content.

Recommended combinations

Deep Rain Forest

Use for strong branding, primary calls to action, or high-contrast, serene layouts.

#0A2A1A · #224838 · #B3D9C9

Misty Tranquility

Ideal for soft, layered backgrounds, subtle UI elements, or calming informational sections.

#B3D9C9 · #7FB39D · #4A7F66

Elegant Contrast

Good for secondary buttons, emphasized text, or card elements that need a clear, yet soft, distinction.

#224838 · #7FB39D · #0A2A1A

CSS variables

:root {
  --verdant-canopy-hush-2-1: #0A2A1A;
  --verdant-canopy-hush-2-2: #224838;
  --verdant-canopy-hush-2-3: #4A7F66;
  --verdant-canopy-hush-2-4: #7FB39D;
  --verdant-canopy-hush-2-5: #B3D9C9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-canopy-hush-2": {
        1: "#0A2A1A",
        2: "#224838",
        3: "#4A7F66",
        4: "#7FB39D",
        5: "#B3D9C9",
      }
    }
  }
}

Hex values

Color 1#0A2A1A

Color 2#224838

Color 3#4A7F66

Color 4#7FB39D

Color 5#B3D9C9

Accessibility

Contrast checker

1.5:1Fail

3.3:1AA18

6.5:1AA

10.1:1AAA

1.5:1Fail

2.2:1Fail

4.3:1AA18

6.7:1AA

3.3:1AA18

2.2:1Fail

2:1Fail

3:1AA18

6.5:1AA

4.3:1AA18

2:1Fail

1.5:1Fail

10.1:1AAA

6.7:1AA

3:1AA18

1.5:1Fail

Similar palettes

More like Verdant Canopy Hush

Verdant Canopy Hush

See it in context.

Ready when you are.

Built with Verdant Canopy Hush.

How to use Verdant Canopy Hush

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Rain Forest

Misty Tranquility

Elegant Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Verdant Canopy Hush