Palette

Forest Canopy Verdant

Evokes the lush, layered greens of a dense forest canopy reaching for the sun, full of life.

monochromenatural5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A2E05#264D00#466E1D#678D3C#8CB061

Palette guide

How to use Forest Canopy Verdant

Overview

The Forest Canopy Verdant palette embodies the lush, layered greens of a dense forest canopy reaching for the sun, full of life and growth. This monochromatic collection ranges from the profound #0A2E05 and #264D00 to the vibrant #466E1D, #678D3C, and the airy #8CB061. It's an exceptional choice for designers seeking to convey deep natural connection, organic sophistication, and enduring vitality. The palette's gradual progression from deep, shadowy greens to lighter, sun-kissed hues allows for rich textural designs that feel grounded, luxurious, and inherently alive, perfect for projects emphasizing natural growth and quality.

Best used for

Premium organic product branding and packaging
Sustainable living and eco-conscious blogs
High-end gardening and landscape design services
Ecological research and conservation foundations
Natural remedy and holistic wellness brands
Sophisticated nature photography portfolios

Suggested color roles

primary

Utilize #0A2E05 for foundational elements, prominent headings, or key brand identifiers, establishing deep authority.

secondary

Employ #466E1D or #264D00 for supporting content, background panels, or secondary navigation, adding rich texture.

accent

Reserve #8CB061 for subtle highlights, interactive states, or delicate graphic elements that require a soft, natural glow.

background

The lightest shade, #8CB061, or a very light neutral (e.g., #F0F8FF) can serve as a clean, natural background.

text

For body text, use #0A2E05 or a deep charcoal for optimal readability and to maintain the palette's sophisticated feel.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter greens like #8CB061 for backgrounds.
For small text or critical information, always use the darkest shades, #0A2E05 or #264D00, to maximize readability.
Verify that interactive elements have a discernible contrast difference in their default and hover states.
Test color pairings for users with color vision deficiencies, as some monochromatic greens might be challenging to differentiate.

Recommended combinations

Deep Verdant

Creates a rich, immersive backdrop, perfect for headers, footers, or sections requiring deep, organic depth.

#0A2E05 · #264D00 · #466E1D

Lush Growth

Ideal for lighter sections, such as testimonials or product showcases, emphasizing growth and natural progression.

#466E1D · #678D3C · #8CB061

Full Spectrum

Showcases the full gradient, suitable for layered elements or progress indicators, conveying a smooth, natural transition.

#0A2E05 · #466E1D · #8CB061

CSS variables

:root {
  --forest-canopy-verdant-1: #0A2E05;
  --forest-canopy-verdant-2: #264D00;
  --forest-canopy-verdant-3: #466E1D;
  --forest-canopy-verdant-4: #678D3C;
  --forest-canopy-verdant-5: #8CB061;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-canopy-verdant": {
        1: "#0A2E05",
        2: "#264D00",
        3: "#466E1D",
        4: "#678D3C",
        5: "#8CB061",
      }
    }
  }
}

Hex values

Color 1#0A2E05

Color 2#264D00

Color 3#466E1D

Color 4#678D3C

Color 5#8CB061

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

3.9:1AA18

6:1AA

1.5:1Fail

1.6:1Fail

2.5:1Fail

4:1AA18

2.5:1Fail

1.6:1Fail

2.4:1Fail

3.9:1AA18

2.5:1Fail

1.6:1Fail

6:1AA

4:1AA18

2.4:1Fail

1.6:1Fail

Similar palettes

More like Forest Canopy Verdant

Forest Canopy Verdant

See it in context.

Ready when you are.

Built with Forest Canopy Verdant.

How to use Forest Canopy Verdant

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Verdant

Lush Growth

Full Spectrum

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Forest Canopy Verdant