Back to palettes

Palette

Canopy Greenery

Lush, invigorating greens that evoke the dense, vibrant foliage overhead in a thriving forest canopy.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#228B22#3CB371#66CDAA#1A6B1A#339955

Palette guide

How to use Canopy Greenery

Overview

The Canopy Greenery palette features lush, invigorating greens that evoke the dense, vibrant foliage overhead in a thriving forest canopy. With rich hues like #228B22 (Forest Green), refreshing #3CB371 (Medium Sea Green), and the softer #66CDAA (Medium Aquamarine), this palette offers a natural yet energetic feel. Deeper shades like #1A6B1A and #339955 provide grounding and depth, creating a versatile range of greens. It's an excellent choice for designers seeking to convey growth, freshness, and a strong connection to the natural world, ideal for lively and organic projects.

Best used for

  • Environmental and conservation organization branding
  • Outdoor lifestyle and adventure gear marketing
  • Health and wellness product packaging
  • Sustainable agriculture website design
  • Botanical illustration and nature photography
  • Interior design for refreshing, natural spaces

Suggested color roles

primary

Use #228B22 (Forest Green) for dominant sections, headers, or hero images to establish a strong, natural foundation.

secondary

Employ #3CB371 (Medium Sea Green) for sub-sections, navigation, or as a complementary fresh tone.

accent

Apply #66CDAA (Medium Aquamarine) sparingly for call-to-action buttons, key highlights, or interactive elements to add a lively touch.

background

A neutral cream or very light grey allows these greens to pop, or use #66CDAA as a soft background for specific content.

text

For optimal readability, use white or light grey text on #228B22, #1A6B1A, and #339955, and dark charcoal or black text on #3CB371 and #66CDAA.

Accessibility notes

  • Ensure white text on darker greens like #228B22 and #1A6B1A has sufficient contrast.
  • Dark text (e.g., #333333) is crucial on lighter greens like #3CB371 and #66CDAA for readability.
  • Avoid using similar mid-tone greens for critical text and background to prevent legibility issues.
  • When designing interactive elements, ensure hover/active states provide clear contrast changes.

Recommended combinations

Forest Depths

Ideal for robust branding, large content blocks, or conveying depth and established natural themes.

#228B22 · #1A6B1A · #339955

Lush Growth

Perfect for creating vibrant web backgrounds, fresh illustrations, or an energetic eco-conscious design.

#3CB371 · #66CDAA · #228B22

Canopy Light

Great for highlighting fresh elements, interactive features, or a serene yet lively UI.

#66CDAA · #339955 · #3CB371

CSS variables

:root {
  --canopy-greenery-1: #228B22;
  --canopy-greenery-2: #3CB371;
  --canopy-greenery-3: #66CDAA;
  --canopy-greenery-4: #1A6B1A;
  --canopy-greenery-5: #339955;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canopy-greenery": {
        1: "#228B22",
        2: "#3CB371",
        3: "#66CDAA",
        4: "#1A6B1A",
        5: "#339955",
      }
    }
  }
}

Related searches

lush green palettevibrant nature colorsforest canopy schemeenergetic green brandinggrowth and freshness palette

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#66CDAA
·
Color 4#1A6B1A
·
Color 5#339955
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
1.5:1Fail
1.2:1Fail
2
1.6:1Fail
1.4:1Fail
2.5:1Fail
1.4:1Fail
3
2.3:1Fail
1.4:1Fail
3.4:1AA18
1.9:1Fail
4
1.5:1Fail
2.5:1Fail
3.4:1AA18
1.8:1Fail
5
1.2:1Fail
1.4:1Fail
1.9:1Fail
1.8:1Fail

Similar palettes

More like Canopy Greenery

View all vibrant