Back to palettes

Palette

Forest Canopy

Various shades of deep and vibrant greens mimic the rich, overlapping layers of a dense forest's leafy canopy.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

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

Palette guide

How to use Forest Canopy

Overview

The Forest Canopy palette offers a rich and diverse spectrum of greens, perfectly capturing the lush, overlapping layers of a dense woodland. Featuring deep forest green #228B22, vibrant medium sea green #3CB371, and an olive drab hue #6B8E23, this collection provides a natural, organic feel. Designers can leverage these shades to create immersive digital environments, branding for eco-conscious businesses, or serene user interfaces. Developers will find these hex codes straightforward for implementation, ensuring consistency across web and mobile platforms. The palette also includes a muted olive #556B2F and a soft light green #8FBC8F, enabling a balanced visual hierarchy and a cohesive aesthetic that feels grounded and refreshing.

Best used for

  • Nature-themed branding and logos
  • Eco-friendly product packaging
  • Website design for environmental organizations
  • Interior design concepts for serene spaces
  • Digital illustrations of landscapes
  • Outdoor adventure apparel design

Suggested color roles

primary

Use #228B22 (Forest Green) as the dominant color for large sections, headers, or primary calls-to-action to establish a strong, natural foundation.

secondary

Apply #3CB371 (Medium Sea Green) for supporting elements, secondary buttons, or navigational links to add vibrancy without overpowering the primary.

accent

Incorporate #6B8E23 (Olive Drab) sparingly for highlights, icons, or interactive states, providing a subtle, earthy contrast.

background

Utilize #8FBC8F (Dark Sea Green) for softer backgrounds, content cards, or subtle gradients, offering a light, airy base that complements the darker greens.

text

Employ #556B2F (Dark Olive Green) for body text and paragraphs, ensuring readability against lighter backgrounds, or use a dark charcoal for better contrast on very light elements.

Accessibility notes

  • Ensure sufficient contrast between #228B22 and #8FBC8F for large text, as their luminance difference might be borderline.
  • Use #556B2F for body text on light backgrounds like #8FBC8F to meet WCAG AA standards for readability.
  • Avoid placing #6B8E23 directly on #556B2F without checking contrast, especially for smaller text or UI elements.
  • For interactive elements, provide clear focus states using a color with high contrast from its resting state, such as #3CB371 against a #8FBC8F background.

Recommended combinations

Woodland Depth

Ideal for creating a sense of natural depth and maturity in branding or header graphics.

#228B22 · #556B2F · #6B8E23

Fresh Greens

Excellent for designs requiring a fresh, vibrant, and approachable natural aesthetic, like health apps.

#3CB371 · #8FBC8F · #228B22

Earthy Harmony

Perfect for subtle, organic textures and backgrounds where a gentle, harmonious feel is desired.

#6B8E23 · #8FBC8F · #556B2F

CSS variables

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

Tailwind config

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

Related searches

natural green color schemeforest themed web designearthy color palette for brandingwoodland green hex codesserene nature colors

Palette colors

Hex values

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

Accessibility

Contrast checker

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

Similar palettes

More like Forest Canopy

View all earth
Canopy Emerald Burst
Deep Forest Emerald
Emerald Canopy Shroud
Emerald Moss Canopy
Emerald Rainforest Mist
Forest Bark Comfort