Back to palettes

Palette

Forest Canopy

Inspired by the lush, overlapping greens of a dense forest overhead, alive with natural light.

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

#2C3E2F#4A6E4F#78A07A#A9C9AC#DCEADF

Palette guide

How to use Forest Canopy

Overview

The Forest Canopy palette captures the serene beauty of a dense forest overhead, alive with natural light filtering through lush, overlapping greens. This palette features a harmonious gradient from the deep Dark Slate Green (#2C3E2F) to the very light Pale Green (#DCEADF), with intermediate shades like Medium Dark Green (#4A6E4F), Muted Green (#78A07A), and Light Green (#A9C9AC). It evokes a sense of calm, growth, and natural elegance, making it highly useful for designers and developers seeking a sophisticated yet earthy aesthetic. The muted tones allow for a soft, inviting feel, perfect for minimalist designs that still want to convey a connection to nature.

Best used for

  • Wellness and spa brand identities
  • Sustainable fashion lines or websites
  • Minimalist interior design concepts
  • Organic beauty product packaging
  • Calm and tranquil digital interfaces
  • Nature-inspired art and photography

Suggested color roles

primary

Dark Slate Green (#2C3E2F) provides a strong, grounding anchor for headers or large sections.

secondary

Medium Dark Green (#4A6E4F) and Muted Green (#78A07A) are excellent for supporting content and visual hierarchy.

accent

Light Green (#A9C9AC) or Pale Green (#DCEADF) can serve as subtle, refreshing accents for interactive elements or highlights.

background

Pale Green (#DCEADF) offers a clean, airy background, while Dark Slate Green (#2C3E2F) creates a dramatic, sophisticated backdrop.

text

On lighter backgrounds, a deep charcoal or black ensures readability. For dark backgrounds, a crisp white is recommended.

Accessibility notes

  • Ensure adequate contrast between #A9C9AC and #DCEADF if used for text and background respectively.
  • Dark Slate Green (#2C3E2F) provides excellent contrast for white text.
  • When using mid-tones like #78A07A, pair with either very dark or very light text for readability.
  • Avoid using #4A6E4F on #78A07A for small text due to insufficient contrast.

Recommended combinations

Soft Gradient

Ideal for creating depth in UI elements or subtle background transitions.

#2C3E2F · #4A6E4F · #78A07A

Light & Airy

Perfect for clean content areas, navigation, or as a primary background.

#A9C9AC · #DCEADF · #4A6E4F

Contrast Anchor

Use the darkest green for text or borders on the lightest background for clear definition.

#2C3E2F · #DCEADF · #78A07A

CSS variables

:root {
  --forest-canopy-3-1: #2C3E2F;
  --forest-canopy-3-2: #4A6E4F;
  --forest-canopy-3-3: #78A07A;
  --forest-canopy-3-4: #A9C9AC;
  --forest-canopy-3-5: #DCEADF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-canopy-3": {
        1: "#2C3E2F",
        2: "#4A6E4F",
        3: "#78A07A",
        4: "#A9C9AC",
        5: "#DCEADF",
      }
    }
  }
}

Related searches

muted green color palettecalm forest designlight green nature themetranquil woodland colorsminimalist green scheme

Palette colors

Hex values

Color 1#2C3E2F
·
Color 2#4A6E4F
·
Color 3#78A07A
·
Color 4#A9C9AC
·
Color 5#DCEADF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.9:1AA18
6.3:1AA
9.2:1AAA
2
2:1Fail
2:1Fail
3.2:1AA18
4.6:1AA
3
3.9:1AA18
2:1Fail
1.6:1Fail
2.4:1Fail
4
6.3:1AA
3.2:1AA18
1.6:1Fail
1.5:1Fail
5
9.2:1AAA
4.6:1AA
2.4:1Fail
1.5:1Fail

Similar palettes

More like Forest Canopy

View all earth
Emerald Canopy Hush
Forest Fern Pathway
Mossy Woodland Glade
Woodland Moss Path
Ancient Temple Moss
Botanical Groundcover Greens