Palette

Verdant Canopy Light

Captures the varied greens of a dense forest canopy bathed in dappled sunlight.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0E4749#567342#7B9C73#B8CD6B#E9EFC0

Palette guide

How to use Verdant Canopy Light

Overview

The Verdant Canopy Light palette, identified by its fresh and vibrant character, captures the essence of a dense forest canopy bathed in dappled sunlight. Featuring a striking `#0E4749` teal-green, a lively `#567342` primary green, and the bright, energetic `#B8CD6B`, this collection is perfect for designs needing a natural yet invigorating feel. The soft, sunlit `#E9EFC0` provides an ideal light background, allowing the deeper greens to truly pop. Designers and developers can utilize this palette to create dynamic, growth-oriented themes that resonate with vitality and an organic aesthetic across web, mobile, and print applications.

Best used for

Outdoor adventure and eco-tourism branding
Organic food and healthy living product packaging
Educational apps focusing on nature and botany
Spring and summer fashion collections
Botanical garden or nature reserve websites
Fresh and vibrant UI/UX designs

Suggested color roles

primary

Use `#567342` as the main green to convey vibrancy and natural growth.

secondary

Employ `#0E4749` for deep contrast, headers, or navigational elements, providing a grounded feel.

accent

Apply `#B8CD6B` for bright calls to action, highlights, or interactive elements to create energy.

background

Utilize `#E9EFC0` as a soft, sunlit background that allows other colors to stand out.

text

Choose `#0E4749` for primary text on light backgrounds for excellent readability and a strong visual anchor.

Accessibility notes

Ensure `#0E4749` text on `#E9EFC0` provides excellent contrast, meeting WCAG AA standards.
Be cautious using `#B8CD6B` for small text, especially against `#7B9C73`, due to potential low contrast.
Use `#567342` for larger text or interactive elements on lighter backgrounds for better visibility.
Regularly check all text and UI element contrast ratios to ensure accessibility for all users.

Recommended combinations

Vibrant Contrast

Creates a lively and high-contrast look, perfect for headers or key visual elements.

#0E4749 · #B8CD6B · #E9EFC0

Forest Depth

Ideal for layered designs, showcasing the varied depths of a forest canopy.

#567342 · #7B9C73 · #0E4749

Light & Fresh

Excellent for soft, airy backgrounds or illustrations needing a delicate, fresh feel.

#7B9C73 · #B8CD6B · #E9EFC0

CSS variables

:root {
  --verdant-canopy-light-2-1: #0E4749;
  --verdant-canopy-light-2-2: #567342;
  --verdant-canopy-light-2-3: #7B9C73;
  --verdant-canopy-light-2-4: #B8CD6B;
  --verdant-canopy-light-2-5: #E9EFC0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-canopy-light-2": {
        1: "#0E4749",
        2: "#567342",
        3: "#7B9C73",
        4: "#B8CD6B",
        5: "#E9EFC0",
      }
    }
  }
}

Hex values

Color 1#0E4749

Color 2#567342

Color 3#7B9C73

Color 4#B8CD6B

Color 5#E9EFC0

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.9:1AA

8.7:1AAA

1.9:1Fail

1.7:1Fail

3.1:1AA18

4.5:1AA18

3.4:1AA18

1.7:1Fail

1.8:1Fail

2.6:1Fail

5.9:1AA

3.1:1AA18

1.8:1Fail

1.5:1Fail

8.7:1AAA

4.5:1AA18

2.6:1Fail

1.5:1Fail

Similar palettes

More like Verdant Canopy Light

View all earth

Emerald Forest Depths

Enchanted Forest Bloom

Enchanted Glade Dew

Forest Canopy Gold

Jade Canopy Serene

Rainforest Canopy Light