Palette

Dusky Forest Whispers

Captures the quiet, almost mysterious atmosphere of a forest as evening descends.

darkcalm5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2D4A3D#4F6C5B#809681#A3AA8F#C3C9BC

Palette guide

How to use Dusky Forest Whispers

Overview

The "Dusky Forest Whispers" palette captures the quiet, almost mysterious atmosphere of a forest as evening descends. This dark and earthy collection features a deep forest green #2D4A3D, a rich muted green #4F6C5B, a softer sage green #809681, a light olive-gray #A3AA8F, and a very light green-gray #C3C9BC. It's ideal for designs seeking a natural, calm, and subtly mysterious aesthetic. Designers can utilize this palette for eco-friendly branding, outdoor adventure themes, or sophisticated digital interfaces. Developers will find these hex codes excellent for creating immersive user experiences that convey tranquility, depth, and a connection to nature.

Best used for

Nature-themed websites and environmental organizations
Outdoor adventure or camping product branding
Luxury eco-resort or spa marketing
Documentary film branding on wildlife or forests
Rustic home decor or furniture design
Mindfulness and meditation apps with a natural backdrop

Suggested color roles

primary

#4F6C5B - A rich muted green, excellent for main content areas, headers, or to establish a natural, calming base.

secondary

#2D4A3D - A deep forest green, perfect for strong headings, important information, or to add grounded depth.

accent

#809681 - A softer sage green, ideal for subtle highlights, interactive states, or to provide delicate visual interest.

background

#C3C9BC - The lightest green-gray, offering an expansive, clean, and airy canvas that enhances the forest tones.

text

#2D4A3D - The darkest color in the palette, ensuring excellent readability on lighter backgrounds. For dark backgrounds, use #C3C9BC or white.

Accessibility notes

For text on #C3C9BC and #A3AA8F, use #2D4A3D or #4F6C5B for sufficient contrast.
When using #2D4A3D or #4F6C5B as backgrounds, use #C3C9BC or pure white for text readability.
Avoid using #809681 as text on #A3AA8F due to potential low contrast, especially for small fonts.
Always test contrast ratios for interactive elements to meet WCAG guidelines, particularly with subtle green-gray shifts.

Recommended combinations

Forest Layers

Creates a soft, atmospheric background gradient or subtle UI elements, evoking diffused light in a forest.

#C3C9BC · #A3AA8F · #809681

Deep Woods

Use for primary branding, strong text, and a light background to highlight the deep, calming greens.

#2D4A3D · #4F6C5B · #C3C9BC

Whispering Accents

Ideal for content blocks, card backgrounds, or subtle visual hierarchy with a natural, serene feel.

#A3AA8F · #809681 · #4F6C5B

CSS variables

:root {
  --dusky-forest-whispers-1: #2D4A3D;
  --dusky-forest-whispers-2: #4F6C5B;
  --dusky-forest-whispers-3: #809681;
  --dusky-forest-whispers-4: #A3AA8F;
  --dusky-forest-whispers-5: #C3C9BC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusky-forest-whispers": {
        1: "#2D4A3D",
        2: "#4F6C5B",
        3: "#809681",
        4: "#A3AA8F",
        5: "#C3C9BC",
      }
    }
  }
}

Hex values

Color 1#2D4A3D

Color 2#4F6C5B

Color 3#809681

Color 4#A3AA8F

Color 5#C3C9BC

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

4:1AA18

5.7:1AA

1.7:1Fail

1.8:1Fail

2.4:1Fail

3.4:1AA18

3.1:1AA18

1.8:1Fail

1.3:1Fail

1.9:1Fail

4:1AA18

2.4:1Fail

1.3:1Fail

1.4:1Fail

5.7:1AA

3.4:1AA18

1.9:1Fail

1.4:1Fail

Similar palettes

More like Dusky Forest Whispers

View all dark

Whispering Pines Shade