Palette

Lush Emerald Canopy

A dynamic range of deep to bright greens, reflecting a vibrant and lush jungle canopy.

vibrantnatural5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lush Emerald 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 Lush Emerald Canopy.

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

Data visualization

#0A6640#2E8B57#66CDAA#074D30#1F7047

Palette guide

How to use Lush Emerald Canopy

Overview

The Lush Emerald Canopy palette offers a dynamic and vibrant range of deep to bright greens, perfectly reflecting a flourishing jungle canopy. Anchored by the profound #074D30 and the rich #0A6640, it transitions through the lively #1F7047 and the refreshing #2E8B57, culminating in the bright, ethereal #66CDAA. This collection is ideal for designers and developers seeking to evoke nature, freshness, and tropical vitality. Its cohesive blend of emerald and forest greens creates an immersive and energizing visual experience, perfect for projects that aim to connect users with lush, natural environments and a sense of vibrant growth.

Best used for

Tropical resort or travel agency branding
Nature-themed mobile applications and games
Eco-conscious product packaging and websites
Health and wellness brands promoting vitality
Environmental education platforms
Outdoor adventure and exploration services

Suggested color roles

primary

Use #0A6640 as a strong, dominant primary for main sections, headers, or key brand elements, signifying lushness and stability.

secondary

Apply #1F7047 for supportive content, subheadings, or secondary calls-to-action, offering a slightly lighter, active presence.

accent

Employ #66CDAA to highlight interactive elements, key information, or decorative details, bringing a bright, refreshing pop.

background

Utilize #074D30 for deep, immersive backgrounds, creating an atmospheric, jungle-like feel, or a light cream for contrast.

text

For optimal readability, use white or a very light grey text on darker backgrounds like #0A6640 or #074D30, and #074D30 on #66CDAA.

Accessibility notes

Ensure white text on #0A6640 or #074D30 backgrounds meets WCAG AA contrast standards.
Avoid pairing #2E8B57 and #66CDAA for small text or critical information due to potentially insufficient contrast.
Test all text and interactive element contrasts across various devices and lighting conditions for universal legibility.
Be mindful of color blind users; green palettes may require additional contrast checks for differentiation.

Recommended combinations

Deep Forest

Ideal for a dark, immersive theme, with a deep background, bright accent, and a mid-green for supporting details.

#074D30 · #66CDAA · #1F7047

Emerald Glow

Excellent for vibrant content areas, using a primary green base, a lighter secondary, and a vivid accent.

#0A6640 · #2E8B57 · #66CDAA

Canopy Light

Suitable for a lighter section, with a bright background, deep text, and a mid-green for links or icons.

#66CDAA · #0A6640 · #1F7047

CSS variables

:root {
  --lush-emerald-canopy-1: #0A6640;
  --lush-emerald-canopy-2: #2E8B57;
  --lush-emerald-canopy-3: #66CDAA;
  --lush-emerald-canopy-4: #074D30;
  --lush-emerald-canopy-5: #1F7047;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lush-emerald-canopy": {
        1: "#0A6640",
        2: "#2E8B57",
        3: "#66CDAA",
        4: "#074D30",
        5: "#1F7047",
      }
    }
  }
}

Hex values

Color 1#0A6640

Color 2#2E8B57

Color 3#66CDAA

Color 4#074D30

Color 5#1F7047

Accessibility

Contrast checker

1.7:1Fail

3.6:1AA18

1.4:1Fail

1.2:1Fail

1.7:1Fail

2.2:1Fail

2.3:1Fail

1.4:1Fail

3.6:1AA18

2.2:1Fail

5.1:1AA

3.1:1AA18

1.4:1Fail

2.3:1Fail

5.1:1AA

1.6:1Fail

1.2:1Fail

1.4:1Fail

3.1:1AA18

1.6:1Fail

Similar palettes

More like Lush Emerald Canopy

Lush Emerald Canopy

See it in context.

Ready when you are.

Built with Lush Emerald Canopy.

How to use Lush Emerald Canopy

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Forest

Emerald Glow

Canopy Light

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lush Emerald Canopy