Palette

Misty Forest Fern

Captures the serene, damp essence of a moss-covered forest after a soft rain.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B4332#2D6A4F#52B788#95D5B2#D8F3DC

Palette guide

How to use Misty Forest Fern

Overview

The Misty Forest Fern palette captures the serene, damp essence of a moss-covered forest after a soft rain, offering a vibrant yet tranquil range of greens. From the deep, anchoring #1B4332 to the fresh, airy #D8F3DC, this collection is perfect for designs seeking a natural, refreshing, and sophisticated aesthetic. The vivid mid-tones like #2D6A4F and #52B788 provide excellent choices for establishing visual hierarchy and adding depth, making it ideal for projects that aim to convey vitality, environmental consciousness, and a connection to nature's tranquility.

Best used for

Botanical garden branding
Eco-friendly product packaging
Outdoor adventure gear websites
Health and wellness apps
Nature-themed educational content
Sustainable lifestyle blogs

Suggested color roles

primary

#1B4332 - A very deep forest green, ideal for main headings, important calls-to-action, or strong brand identity.

secondary

#2D6A4F - A rich, deep green, suitable for sub-headings, secondary UI elements, or background panels.

accent

#52B788 - A vibrant, fresh green, perfect for highlights, active states, or eye-catching graphic elements.

background

#D8F3DC - A very light, almost white, with a subtle green tint, providing a fresh and expansive canvas.

text

#1B4332 - The darkest color, ensuring excellent readability for all body text against lighter backgrounds like #D8F3DC.

Accessibility notes

Ensure #1B4332 text on #D8F3DC background meets WCAG contrast standards for clear readability.
Avoid using #95D5B2 or #D8F3DC for small text on very light backgrounds due to insufficient contrast.
Use #1B4332 or #2D6A4F for critical text and interactive elements.
For buttons, ensure the text (e.g., white or #D8F3DC) has strong contrast against the button color (e.g., #2D6A4F).

Recommended combinations

Vibrant Header

Deep, legible text on a fresh, light background for a striking header.

#1B4332 · #D8F3DC · #2D6A4F

Fresh CTA

A primary button with a vibrant, contrasting hover or pressed state.

#2D6A4F · #52B788 · #95D5B2

Leafy Accent

Gradient or graphic element for a natural, layered feel.

#95D5B2 · #52B788 · #D8F3DC

CSS variables

:root {
  --misty-forest-fern-1: #1B4332;
  --misty-forest-fern-2: #2D6A4F;
  --misty-forest-fern-3: #52B788;
  --misty-forest-fern-4: #95D5B2;
  --misty-forest-fern-5: #D8F3DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-forest-fern": {
        1: "#1B4332",
        2: "#2D6A4F",
        3: "#52B788",
        4: "#95D5B2",
        5: "#D8F3DC",
      }
    }
  }
}

Hex values

Color 1#1B4332

Color 2#2D6A4F

Color 3#52B788

Color 4#95D5B2

Color 5#D8F3DC

Accessibility

Contrast checker

1.7:1Fail

4.5:1AA18

6.6:1AA

9.4:1AAA

1.7:1Fail

2.6:1Fail

3.8:1AA18

5.4:1AA

4.5:1AA18

2.6:1Fail

1.5:1Fail

2.1:1Fail

6.6:1AA

3.8:1AA18

1.5:1Fail

1.4:1Fail

9.4:1AAA

5.4:1AA

2.1:1Fail

1.4:1Fail

Similar palettes

More like Misty Forest Fern

Enchanted Forest Stream

Enchanted Grove Mist