Palette

Forest Fern Shadow

A soothing monochrome of deep greens, like light filtering through a dense fern undergrowth.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4A6D6D#7AA09E#B5D1D0#1E3B3B

Palette guide

How to use Forest Fern Shadow

Overview

The Forest Fern Shadow palette offers a serene and sophisticated monochrome journey through deep greens, perfect for evoking a sense of calm and natural depth. Dominated by hues like the profound #2F4F4F and the slightly lighter #4A6D6D, it provides a strong, stable foundation. The accent color #7AA09E introduces a subtle, refreshing lift, while #B5D1D0 serves as an excellent light background or highlight. Designers and developers can leverage the darkest tone, #1E3B3B, for impactful text or deep shadows, ensuring visual hierarchy. This palette is exceptionally versatile for projects requiring a refined, earthy aesthetic without being overtly vibrant. Its cohesive nature makes it easy to maintain brand consistency across various elements.

Best used for

Nature-themed luxury branding
Spa and wellness website designs
Eco-friendly product packaging
Interior design visualization
Environmental non-profit materials
Relaxation app interfaces

Suggested color roles

primary

#2F4F4F - Ideal for main sections, large blocks, or primary brand identity, conveying stability and depth.

secondary

#4A6D6D - Perfect for sub-headers, navigation elements, or secondary calls to action, offering a softer presence.

accent

#7AA09E - Use sparingly for interactive elements, highlights, or subtle design details to add a touch of freshness.

background

#B5D1D0 - Excellent for clean, readable backgrounds that support darker text, or as a soft, expansive canvas.

text

#1E3B3B - Ensures high readability on lighter backgrounds like #B5D1D0, suitable for body copy and headings.

Accessibility notes

Ensure #1E3B3B text on #B5D1D0 background meets WCAG AAA contrast for optimal readability.
Avoid using #7AA09E for small text on #4A6D6D as contrast might be insufficient.
Use a strong contrast like white or a very light gray for text placed on #2F4F4F or #1E3B3B.
Verify button states and interactive elements for sufficient color difference to indicate active/hover states.

Recommended combinations

Deep Forest

Creates a rich, layered effect perfect for hero sections or sophisticated data visualizations.

#1E3B3B · #2F4F4F · #4A6D6D

Calm Contrast

A balanced combination for main content areas, offering good readability with a gentle accent.

#B5D1D0 · #4A6D6D · #7AA09E

Subtle Highlight

Use for differentiating sections or adding a visual pop to navigation items against a darker base.

#2F4F4F · #7AA09E · #B5D1D0

CSS variables

:root {
  --forest-fern-shadow-1: #2F4F4F;
  --forest-fern-shadow-2: #4A6D6D;
  --forest-fern-shadow-3: #7AA09E;
  --forest-fern-shadow-4: #B5D1D0;
  --forest-fern-shadow-5: #1E3B3B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-fern-shadow": {
        1: "#2F4F4F",
        2: "#4A6D6D",
        3: "#7AA09E",
        4: "#B5D1D0",
        5: "#1E3B3B",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4A6D6D

Color 3#7AA09E

Color 4#B5D1D0

Color 5#1E3B3B

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

5.5:1AA

1.3:1Fail

1.6:1Fail

2:1Fail

3.5:1AA18

2.1:1Fail

3.1:1AA18

2:1Fail

1.8:1Fail

4.2:1AA18

5.5:1AA

3.5:1AA18

1.8:1Fail

7.5:1AAA

1.3:1Fail

2.1:1Fail

4.2:1AA18

7.5:1AAA

Similar palettes

More like Forest Fern Shadow

View all monochrome

Forest Shaded Green

Enchanted Forest Dew

Forest Canopy Slumber

Zen Bamboo Retreat

Ancient Forest Myst

Cobalt Flow