Palette

Forest Fern Canopy

Deep to light greens reflecting the diverse and lush foliage of a verdant forest canopy.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E2F#4A684E#6B8E70#8CB693#ADDDC3

Palette guide

How to use Forest Fern Canopy

Overview

The Forest Fern Canopy palette showcases a beautiful gradient of deep to light greens, mirroring the diverse and lush foliage of a verdant forest. Featuring the profound #2C3E2F, a balanced #4A684E, and the inviting #6B8E70, this collection offers an organic and harmonious aesthetic. Designers can leverage these shades for nature-inspired branding, calming user interfaces, or sophisticated environmental reports. Developers will find these hex codes excellent for creating consistent, visually appealing experiences across various platforms. The inclusion of a soft #8CB693 and a very pale #ADDDC3 provides versatility for backgrounds and accents, ensuring a cohesive and refreshing design.

Best used for

Nature-inspired branding and logos
Wellness and mindfulness applications
Botanical garden websites
Eco-friendly product packaging
Scientific or educational materials on nature
Interior design for serene spaces

Suggested color roles

primary

Use #2C3E2F (Deep Forest Green) as a strong, grounding main color for headers, key elements, or calls-to-action, conveying depth and natural authority.

secondary

Apply #4A684E (Muted Pine Green) for supporting content blocks, subheadings, or secondary UI components, creating a gentle visual flow.

accent

Incorporate #6B8E70 (Soft Fern Green) for subtle highlights, interactive states, or decorative elements, adding a fresh and approachable touch.

background

Utilize #ADDDC3 (Pale Mint Green) as a light, airy background color, providing a clean, refreshing canvas that enhances the darker greens.

text

Employ #2C3E2F (Deep Forest Green) for body text on lighter backgrounds for strong readability, or a dark charcoal for universal contrast.

Accessibility notes

Ensure #2C3E2F has high contrast when used for text against #ADDDC3 to meet WCAG AA standards.
Avoid using #8CB693 for small text on #ADDDC3 due to insufficient contrast.
For interactive elements, ensure distinct focus and hover states, perhaps using #6B8E70 against #ADDDC3.
Consider using a pure black or dark charcoal for body text if legibility with palette colors is a concern on very light backgrounds.

Recommended combinations

Canopy Depths

Excellent for creating deep, immersive backgrounds or gradients that evoke the shaded layers of a forest canopy.

#2C3E2F · #4A684E · #6B8E70

Fresh Foliage

Ideal for light, airy interfaces or content blocks that convey freshness and natural growth, perfect for wellness apps.

#ADDDC3 · #8CB693 · #6B8E70

Organic Contrast

Perfect for establishing clear visual hierarchy with natural contrasts, suitable for clean, eco-conscious web designs.

#2C3E2F · #ADDDC3 · #4A684E

CSS variables

:root {
  --forest-fern-canopy-1: #2C3E2F;
  --forest-fern-canopy-2: #4A684E;
  --forest-fern-canopy-3: #6B8E70;
  --forest-fern-canopy-4: #8CB693;
  --forest-fern-canopy-5: #ADDDC3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-fern-canopy": {
        1: "#2C3E2F",
        2: "#4A684E",
        3: "#6B8E70",
        4: "#8CB693",
        5: "#ADDDC3",
      }
    }
  }
}

Hex values

Color 1#2C3E2F

Color 2#4A684E

Color 3#6B8E70

Color 4#8CB693

Color 5#ADDDC3

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

5:1AA

7.6:1AAA

1.8:1Fail

1.7:1Fail

2.7:1Fail

4.1:1AA18

3.1:1AA18

1.7:1Fail

1.6:1Fail

2.4:1Fail

5:1AA

2.7:1Fail

1.6:1Fail

1.5:1Fail

7.6:1AAA

4.1:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Forest Fern Canopy

View all earth

Emerald Moss Canopy

Enchanted Forest Lumina

Forest Canopy

Forest Canopy Echoes

Forest Whisper Canopy

Jade Canopy Gaze