Palette

Whispering Birch Grove

A cool, serene palette evoking the quiet stillness and subtle greens of a birch grove veiled in a soft, ethereal mist.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Birch Grove 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 Whispering Birch Grove.

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

Data visualization

#DDE4E3#BBCBC7#97ACA6#728D8A#506461

Palette guide

How to use Whispering Birch Grove

Overview

The Whispering Birch Grove palette offers a cool, serene collection of muted greens and grays, evoking the quiet stillness of a birch grove veiled in mist. With shades ranging from the ethereal #DDE4E3 to the deep #506461, this monochrome palette provides a sophisticated foundation for designs seeking a tranquil and natural feel. The mid-tone #97ACA6 grounds the composition, while #728D8A adds subtle depth. Designers and developers can leverage these harmonious tones to create calming and cohesive visual experiences.

Best used for

Nature-inspired branding
Wellness and meditation apps
Serene interior design concepts
Eco-friendly product packaging
Sophisticated web interfaces and dashboards
Environmental awareness campaigns

Suggested color roles

primary

#DDE4E3 serves as a light, ethereal base, perfect for backgrounds and spacious layouts.

secondary

#BBCBC7 provides supportive, gentle green-gray tones for secondary content or UI elements.

accent

#728D8A offers a mid-dark shade for subtle emphasis on icons or call-to-action elements.

background

#DDE4E3 creates a soft, calming canvas that enhances a sense of peace.

text

#506461 delivers a deep, readable green-gray, ideal for body text and important headings.

Accessibility notes

Ensure #506461 (text) has sufficient contrast against #DDE4E3 and #BBCBC7 for optimal readability.
Avoid using #DDE4E3 or #BBCBC7 for small text, as contrast will be low against light backgrounds.
Check contrast ratios for interactive elements, especially if using mid-tones like #97ACA6.
Consider using #728D8A for larger headings to ensure visibility without being too stark.

Recommended combinations

Misty Serenity

For a light, airy, and harmonious design, suitable for hero sections or tranquil backgrounds.

#DDE4E3 · #BBCBC7 · #97ACA6

Forest Depth

To create visual weight and a sense of grounding, ideal for footers, navigation, or data visualization.

#97ACA6 · #728D8A · #506461

Cool Harmony

For balanced sections where both lightness and depth are required, such as content cards or feature blocks.

#BBCBC7 · #728D8A · #DDE4E3

CSS variables

:root {
  --whispering-birch-grove-1: #DDE4E3;
  --whispering-birch-grove-2: #BBCBC7;
  --whispering-birch-grove-3: #97ACA6;
  --whispering-birch-grove-4: #728D8A;
  --whispering-birch-grove-5: #506461;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-birch-grove": {
        1: "#DDE4E3",
        2: "#BBCBC7",
        3: "#97ACA6",
        4: "#728D8A",
        5: "#506461",
      }
    }
  }
}

Hex values

Color 1#DDE4E3

Color 2#BBCBC7

Color 3#97ACA6

Color 4#728D8A

Color 5#506461

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

2.8:1Fail

4.9:1AA

1.3:1Fail

1.4:1Fail

2.1:1Fail

3.7:1AA18

1.9:1Fail

1.4:1Fail

1.5:1Fail

2.6:1Fail

2.8:1Fail

2.1:1Fail

1.5:1Fail

1.8:1Fail

4.9:1AA

3.7:1AA18

2.6:1Fail

1.8:1Fail

Similar palettes

More like Whispering Birch Grove

View all monochrome

Ancient Forest Myst

Forest Canopy Slumber

Emerald River Flow

Enchanted Forest Dew

Enchanted Moss Glimmer

Forest Fern Grotto