Palette

Forest Fern Whisper

A serene blend of deep and muted greens, reflecting the hushed calm of a moss-covered forest under soft light.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A5F40#6B8B70#9FBBA5#CDE0D4#4D7252

Palette guide

How to use Forest Fern Whisper

Overview

The Forest Fern Whisper palette embodies the serene and hushed calm of a moss-covered forest, offering a deeply natural and soothing aesthetic. Featuring a harmonious blend of muted greens, from the grounding #3A5F40 to the gentle #CDE0D4, this palette is ideal for creating soft, organic designs. The slightly darker #4D7252 provides a robust anchor, while #6B8B70 and #9FBBA5 offer versatile mid-tones. Designers and developers can utilize this spectrum to build interfaces and branding that feel authentic, tranquil, and connected to nature. Its gentle transitions ensure visual comfort, making it perfect for applications prioritizing user relaxation and subtle elegance.

Best used for

Organic food brand packaging
Yoga and meditation app interfaces
Botanical garden website design
Sustainable fashion branding
Wellness retreat promotional materials
Nature photography portfolios

Suggested color roles

primary

#3A5F40 - Establishes a deep, natural foundation for large areas or primary branding, conveying stability.

secondary

#6B8B70 - Suitable for sub-sections, navigation, or secondary informational blocks, providing visual continuity.

accent

#9FBBA5 - Use for subtle highlights, interactive elements, or graphic details to introduce a soft, refreshing touch.

background

#CDE0D4 - An excellent light, airy background color that allows darker text to stand out clearly and softly.

text

#4D7252 - Provides strong readability on lighter backgrounds like #CDE0D4, ideal for body text and important headings.

Accessibility notes

Ensure text in #4D7252 on #CDE0D4 background meets WCAG AA contrast for good readability.
Avoid placing #9FBBA5 text on #6B8B70 unless it's for very large display type due to low contrast.
For text on dark backgrounds like #3A5F40, consider a light, near-white shade for sufficient contrast.
Differentiate interactive elements with clear visual cues beyond just color, such as underlines or icons.

Recommended combinations

Deep Moss

Creates a rich, earthy depth, suitable for footer areas or strong brand statements.

#3A5F40 · #4D7252 · #6B8B70

Gentle Flow

Ideal for main content blocks, offering a soft, readable environment with subtle visual interest.

#CDE0D4 · #6B8B70 · #9FBBA5

Whisper Highlight

Use for a dark base with a soft, natural accent, effective for calls to action or key information.

#3A5F40 · #9FBBA5 · #CDE0D4

CSS variables

:root {
  --forest-fern-whisper-1: #3A5F40;
  --forest-fern-whisper-2: #6B8B70;
  --forest-fern-whisper-3: #9FBBA5;
  --forest-fern-whisper-4: #CDE0D4;
  --forest-fern-whisper-5: #4D7252;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-fern-whisper": {
        1: "#3A5F40",
        2: "#6B8B70",
        3: "#9FBBA5",
        4: "#CDE0D4",
        5: "#4D7252",
      }
    }
  }
}

Hex values

Color 1#3A5F40

Color 2#6B8B70

Color 3#9FBBA5

Color 4#CDE0D4

Color 5#4D7252

Accessibility

Contrast checker

1.9:1Fail

3.5:1AA18

5.3:1AA

1.3:1Fail

1.9:1Fail

1.8:1Fail

2.7:1Fail

1.4:1Fail

3.5:1AA18

1.8:1Fail

1.5:1Fail

2.6:1Fail

5.3:1AA

2.7:1Fail

1.5:1Fail

4:1AA18

1.3:1Fail

1.4:1Fail

2.6:1Fail

4:1AA18

Similar palettes

More like Forest Fern Whisper

View all earth

Verdant Moss Whisper

Whispering Willow Path