Palette

Forest Fern Canopy

Lush and serene greens reflecting the tranquil beauty of a fern-covered forest floor.

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

#3A4F3F#5C7A6D#80A192#A8C9BB#2B3C2D

Palette guide

How to use Forest Fern Canopy

Overview

The Forest Fern Canopy palette offers a serene collection of lush, muted greens, reflecting the tranquil beauty of a fern-covered forest floor. Featuring the deep #3A4F3F, a calming #5C7A6D, and the soft #80A192, this palette creates a peaceful and sophisticated natural aesthetic. Designers can utilize these shades for minimalist branding, calm user interfaces, or elegant editorial designs. Developers will find these hex codes ideal for creating consistent, harmonious visual experiences that evoke a sense of quiet natural beauty. The inclusion of a very light #A8C9BB and a rich, dark #2B3C2D provides depth and versatility for various applications, from backgrounds to text.

Best used for

Minimalist branding and logos
Wellness and mindfulness apps
Interior design for tranquil spaces
Nature photography portfolios
Eco-conscious lifestyle blogs
Spa and relaxation product packaging

Suggested color roles

primary

Use #3A4F3F (Deep Sage Green) as a grounding color for main sections or prominent UI elements, setting a calm and sophisticated tone.

secondary

Apply #5C7A6D (Muted Forest Green) for supporting content, subheadings, or secondary calls-to-action, providing a gentle visual flow.

accent

Incorporate #80A192 (Soft Moss Green) for subtle highlights, delicate icons, or interactive states, adding a touch of understated elegance.

background

Utilize #A8C9BB (Pale Fern Green) as a light, airy background color, creating a serene and expansive canvas for content.

text

Employ #2B3C2D (Deep Charcoal Green) for body text and critical information, ensuring excellent readability against lighter backgrounds.

Accessibility notes

Ensure #2B3C2D has sufficient contrast when used for text against #A8C9BB to meet WCAG AA standards.
Avoid pairing #80A192 with #A8C9BB for small text due to potentially low contrast.
For interactive elements, provide clear visual feedback using a color like #3A4F3F against a lighter background.
Consider using a slightly darker neutral text color if legibility on very light backgrounds is a concern for accessibility.

Recommended combinations

Fern Shade

Ideal for creating deep, calming backgrounds or header sections that evoke the shaded parts of a forest.

#2B3C2D · #3A4F3F · #5C7A6D

Grotto Light

Excellent for light, airy interfaces or content blocks that feel refreshing and open, like light in a grotto.

#A8C9BB · #80A192 · #5C7A6D

Tranquil Contrast

Perfect for establishing clear, gentle visual hierarchy, suitable for elegant websites and editorial layouts.

#3A4F3F · #A8C9BB · #2B3C2D

CSS variables

:root {
  --forest-fern-canopy-3-1: #3A4F3F;
  --forest-fern-canopy-3-2: #5C7A6D;
  --forest-fern-canopy-3-3: #80A192;
  --forest-fern-canopy-3-4: #A8C9BB;
  --forest-fern-canopy-3-5: #2B3C2D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-fern-canopy-3": {
        1: "#3A4F3F",
        2: "#5C7A6D",
        3: "#80A192",
        4: "#A8C9BB",
        5: "#2B3C2D",
      }
    }
  }
}

Hex values

Color 1#3A4F3F

Color 2#5C7A6D

Color 3#80A192

Color 4#A8C9BB

Color 5#2B3C2D

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

5:1AA

1.3:1Fail

1.9:1Fail

1.7:1Fail

2.6:1Fail

2.5:1Fail

3.1:1AA18

1.7:1Fail

1.6:1Fail

4.2:1AA18

5:1AA

2.6:1Fail

1.6:1Fail

6.6:1AA

1.3:1Fail

2.5:1Fail

4.2:1AA18

6.6:1AA

Similar palettes

More like Forest Fern Canopy

View all earth

Deep Forest Fern

Forest Floor Echo

Gentle Stream Pebbles

Lush Fern Canopy

Monsoon Bloom Mist

Mossy Forest Path