Back to palettes

Palette

Lush Forest Canopy

A deep and rich array of greens, reflecting the dense, vibrant foliage and life within a thriving forest canopy.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#228B22#3CB371#6B8E23#8FBC8F#556B2F

Palette guide

How to use Lush Forest Canopy

Overview

The Lush Forest Canopy palette brings the deep, vibrant essence of a thriving woodland into your designs. Dominated by rich greens like the foundational `#228B22` and the earthy `#556B2F`, it offers a natural, grounded feel. Designers can leverage the mid-tone `#3CB371` and the softer `#6B8E23` for depth, while `#8FBC8F` provides a gentle highlight. This scheme is ideal for projects aiming to evoke growth, tranquility, and the profound beauty of nature, offering a versatile range of greens for both subtle and impactful applications.

Best used for

  • Eco-friendly product branding and packaging
  • Nature-themed websites or mobile applications
  • Outdoor adventure and conservation organizations
  • Spa and wellness retreat branding
  • Educational materials on botany or environment
  • Interior design schemes for natural spaces

Suggested color roles

primary

Use `#228B22` as a robust primary for headers, hero sections, or main branding elements, conveying stability and natural growth.

secondary

Employ `#3CB371` or `#6B8E23` for supporting graphics, subheadings, or background elements that need a slightly softer, yet still vibrant, green presence.

accent

Apply `#8FBC8F` for calls to action, interactive elements, or small decorative details, providing a lighter, fresh contrast.

background

A very light off-white or a subtle tint of `#8FBC8F` (e.g., a very pale green) works well to provide a clean, natural canvas.

text

For body text, use a deep charcoal or near-black for readability. Headings and important information can utilize `#556B2F` for a sophisticated, integrated look.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter greens like `#8FBC8F` with white text.
  • Darker greens such as `#228B22` provide excellent contrast for light text (e.g., white or light grey).
  • Verify icon and graphic legibility against different background shades within the palette.
  • Consider using a contrast checker tool for all text-to-background combinations to meet WCAG standards.

Recommended combinations

Deep Forest Base

Excellent for primary branding, robust navigation, and strong visual statements in eco-conscious designs.

#228B22 · #556B2F · #3CB371

Canopy Layers

Ideal for softer sections, secondary content blocks, or subtle backgrounds where a gentle, natural feel is desired.

#6B8E23 · #8FBC8F · #3CB371

Vibrant Accents

Use this trio for a balanced visual hierarchy, with the lighter green drawing attention to key interactive elements.

#228B22 · #3CB371 · #8FBC8F

CSS variables

:root {
  --lush-forest-canopy-1: #228B22;
  --lush-forest-canopy-2: #3CB371;
  --lush-forest-canopy-3: #6B8E23;
  --lush-forest-canopy-4: #8FBC8F;
  --lush-forest-canopy-5: #556B2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lush-forest-canopy": {
        1: "#228B22",
        2: "#3CB371",
        3: "#6B8E23",
        4: "#8FBC8F",
        5: "#556B2F",
      }
    }
  }
}

Related searches

forest green color palettenature inspired greensdeep green web designearthy green color schemeorganic branding colors

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#6B8E23
·
Color 4#8FBC8F
·
Color 5#556B2F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.2:1Fail
2:1Fail
1.4:1Fail
2
1.6:1Fail
1.4:1Fail
1.2:1Fail
2.2:1Fail
3
1.2:1Fail
1.4:1Fail
1.8:1Fail
1.6:1Fail
4
2:1Fail
1.2:1Fail
1.8:1Fail
2.8:1Fail
5
1.4:1Fail
2.2:1Fail
1.6:1Fail
2.8:1Fail

Similar palettes

More like Lush Forest Canopy

View all earth
Emerald Forest Canopy
Emerald Moss Canopy
Forest Canopy Light
Forest Fern Canopy
Jade Canopy Gaze
Monsoon Rainforest Floor