Palette

Forest Whisper

Subtle greens and soft greys capture the tranquil, muted beauty of a quiet forest clearing at dawn.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#5F9EA0#A2B29F#D8D4C8#F0EAD6

Palette guide

How to use Forest Whisper

Overview

The Forest Whisper palette captures the tranquil, muted beauty of a quiet forest clearing at dawn, blending subtle greens with soft greys. This elegant collection moves from the deep, grounding #2F4F4F to the airy, almost creamy #F0EAD6. Mid-tones like the refreshing #5F9EA0, the soft #A2B29F, and the gentle #D8D4C8 provide a harmonious gradient, evoking peace and natural grace. Designers and developers can leverage this palette to create serene, sophisticated, and inviting digital experiences. It’s ideal for branding that emphasizes calm, natural elegance, or understated luxury, offering a visual narrative that feels both refreshing and deeply comforting.

Best used for

Minimalist lifestyle blogs
Spa and relaxation services
High-end artisanal products
Calm interior design concepts
Eco-conscious fashion brands
Wellness retreat websites

Suggested color roles

primary

#2F4F4F (Dark Slate Grey) - A deep, sophisticated grey-green, excellent for main backgrounds, navigation, or strong brand statements.

secondary

#5F9EA0 (Cadet Blue) - A refreshing, cool mid-tone for content sections, cards, or secondary graphical elements.

accent

#A2B29F (Sage Green) - A soft, muted green highlight for interactive elements, icons, or subtle decorative touches.

background

#F0EAD6 (Creamy Whisper) - A very light, almost off-white background that provides an expansive, clean, and warm canvas.

text

#D8D4C8 (Light Stone) - Use for headings or larger text on darker backgrounds; for body text on #F0EAD6, a dark charcoal or black is recommended.

Accessibility notes

#F0EAD6 is very light; ensure all text on it uses a very dark color (e.g., #2F4F4F or black) for contrast.
Avoid using #D8D4C8 for small text on #F0EAD6, as contrast will be insufficient.
Check contrast ratios for all text and interactive elements, especially when pairing lighter shades.
For interactive elements on darker backgrounds, use #A2B29F or #F0EAD6 for clear visibility.

Recommended combinations

Deep Clearing

Creates a sophisticated, calming depth for primary content areas or elegant dark themes.

#2F4F4F · #5F9EA0 · #A2B29F

Dawn Light

A light and airy combination, perfect for clean interfaces, headers, or welcoming user experiences.

#F0EAD6 · #D8D4C8 · #A2B29F

Muted Harmony

Provides a gentle yet clear contrast for calls-to-action or important content against a dark base.

#2F4F4F · #A2B29F · #5F9EA0

CSS variables

:root {
  --forest-whisper-1: #2F4F4F;
  --forest-whisper-2: #5F9EA0;
  --forest-whisper-3: #A2B29F;
  --forest-whisper-4: #D8D4C8;
  --forest-whisper-5: #F0EAD6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-whisper": {
        1: "#2F4F4F",
        2: "#5F9EA0",
        3: "#A2B29F",
        4: "#D8D4C8",
        5: "#F0EAD6",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#5F9EA0

Color 3#A2B29F

Color 4#D8D4C8

Color 5#F0EAD6

Accessibility

Contrast checker

2.9:1Fail

4:1AA18

6:1AA

7.4:1AAA

2.9:1Fail

1.4:1Fail

2.1:1Fail

2.5:1Fail