Back to palettes

Palette

Forest Fern Canopy

Lush, refreshing greens evoking the shaded, vibrant growth beneath a dense forest fern 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

#228B22#3CB371#6B8E23#5F9EA0#778899

Palette guide

How to use Forest Fern Canopy

Overview

The Forest Fern Canopy palette blends lush, refreshing greens with cool, muted grays, evoking the shaded, vibrant growth beneath a dense forest. Featuring classic #228B22 (Forest Green), lively #3CB371 (Medium Sea Green), and earthy #6B8E23 (Olive Drab), this palette offers a balanced natural aesthetic. Designers can utilize these shades for eco-conscious branding, nature-inspired interfaces, or sophisticated editorial layouts. Developers will find these hex codes practical for creating consistent and refreshing visual experiences. The inclusion of a cool #5F9EA0 (Cadet Blue) and a soft #778899 (Light Slate Gray) provides unique versatility, allowing for modern accents and subtle contrasts.

Best used for

  • Eco-friendly product branding
  • Nature-themed web applications
  • Sustainable living blogs
  • Modern garden design websites
  • Outdoor and adventure gear marketing
  • Relaxation and wellness app interfaces

Suggested color roles

primary

Use #228B22 (Forest Green) as a strong, grounding main color for headers, key features, or primary calls-to-action, establishing a natural and reliable tone.

secondary

Apply #3CB371 (Medium Sea Green) for supporting content, informational graphics, or secondary UI elements, adding a fresh and inviting touch.

accent

Incorporate #5F9EA0 (Cadet Blue) sparingly for unique highlights, interactive elements, or to introduce a cool, unexpected modern twist.

background

Utilize #778899 (Light Slate Gray) for subtle backgrounds, content cards, or texture, providing a neutral, sophisticated base that allows the greens to shine.

text

Employ #6B8E23 (Olive Drab) for body text on lighter backgrounds for a soft, earthy feel, or a dark charcoal for universal readability.

Accessibility notes

  • Ensure #228B22 has sufficient contrast when used for text against #778899 to meet WCAG AA standards.
  • Avoid using #5F9EA0 for small text on #778899 as the contrast may be insufficient.
  • For interactive elements, ensure clear visual feedback, perhaps using #3CB371 for hover states on a #778899 background.
  • Consider using a very dark neutral for body text if the palette greens don't provide consistent, high-contrast readability on light backgrounds.

Recommended combinations

Forest & Mist

Ideal for creating a sophisticated, cool-toned natural aesthetic, blending lush greens with subtle grays.

#228B22 · #778899 · #5F9EA0

Verdant Refresh

Excellent for designs requiring a fresh, vibrant, and energetic natural feel, like healthy living or outdoor themes.

#3CB371 · #6B8E23 · #228B22

Modern Earth

Perfect for creating a contemporary, grounded look, using earthy greens alongside cool, muted grays for balance.

#6B8E23 · #778899 · #5F9EA0

CSS variables

:root {
  --forest-fern-canopy-5-1: #228B22;
  --forest-fern-canopy-5-2: #3CB371;
  --forest-fern-canopy-5-3: #6B8E23;
  --forest-fern-canopy-5-4: #5F9EA0;
  --forest-fern-canopy-5-5: #778899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-fern-canopy-5": {
        1: "#228B22",
        2: "#3CB371",
        3: "#6B8E23",
        4: "#5F9EA0",
        5: "#778899",
      }
    }
  }
}

Related searches

green and gray palettemodern nature color schemeforest web design with cool tonesrefreshing green hex codeseco branding colors with gray

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#6B8E23
·
Color 4#5F9EA0
·
Color 5#778899
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.2:1Fail
1.4:1Fail
1.2:1Fail
2
1.6:1Fail
1.4:1Fail
1.1:1Fail
1.4:1Fail
3
1.2:1Fail
1.4:1Fail
1.2:1Fail
1:1Fail
4
1.4:1Fail
1.1:1Fail
1.2:1Fail
1.2:1Fail
5
1.2:1Fail
1.4:1Fail
1:1Fail
1.2:1Fail

Similar palettes

More like Forest Fern Canopy

View all earth
Emerald Forest Canopy
Enchanted Forest Canopy
Enchanted Forest Canopy
Enchanted Forest Ring
Enchanted Glade Dew
Fairy Ring Moss