Palette

Whispering Aspen Grove

Cool, silvery greens and whites evoke the delicate rustle and peaceful serenity of an aspen grove.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A7E7A#83A9A7#B1D3D1#E5F7F6#F2FBFB

Palette guide

How to use Whispering Aspen Grove

Overview

The Whispering Aspen Grove palette features cool, silvery greens and whites that evoke the delicate rustle and peaceful serenity of an aspen grove. With its deep #5A7E7A and the ethereal #E5F7F6, this collection is perfect for designs seeking a calm, natural, and refreshing aesthetic. The mid-tone #B1D3D1 provides a soft, approachable quality, making it versatile for both backgrounds and accents. Designers can utilize the lightest shade #F2FBFB for pristine, airy backgrounds, allowing the cool greens to create a sense of tranquility. It's an excellent choice for projects emphasizing nature, wellness, or modern minimalism.

Best used for

Nature and outdoor brand identity
Wellness and spa marketing materials
Eco-friendly product design
Minimalist architectural renderings
Calm and serene digital interfaces
Sustainable living content

Suggested color roles

primary

#5A7E7A - A deep, cool green that grounds the palette, ideal for strong brand elements or headers.

secondary

#83A9A7 - A softer, muted green, perfect for subheadings, navigation, or secondary graphical elements.

accent

#B1D3D1 - A light, silvery green that can be used for highlights, calls-to-action, or subtle decorative details.

background

#F2FBFB - The lightest, almost white shade, ideal for clean, expansive backgrounds that enhance the airy feel.

text

#5A7E7A - An excellent choice for primary body text on lighter backgrounds like #F2FBFB or #E5F7F6, ensuring strong readability.

Accessibility notes

Ensure sufficient contrast between text and background, especially with lighter greens.
Use #5A7E7A or #83A9A7 for text on #F2FBFB or #E5F7F6 backgrounds to meet WCAG AA standards.
Avoid placing #B1D3D1 text on #E5F7F6 or #F2FBFB backgrounds due to insufficient contrast.
For interactive elements, ensure distinct visual cues for hover and active states.

Recommended combinations

Grove Mist

Creates a light, ethereal background and soft layering, perfect for serene and spacious designs.

#F2FBFB · #E5F7F6 · #B1D3D1

Aspen Contrast

A balanced combination for main content areas, offering clear hierarchy with a refreshing feel.

#5A7E7A · #83A9A7 · #E5F7F6

Forest Depths

Emphasizes the cooler, deeper tones, suitable for headers, footers, or moody nature-inspired graphics.

#5A7E7A · #83A9A7 · #B1D3D1

CSS variables

:root {
  --whispering-aspen-grove-1: #5A7E7A;
  --whispering-aspen-grove-2: #83A9A7;
  --whispering-aspen-grove-3: #B1D3D1;
  --whispering-aspen-grove-4: #E5F7F6;
  --whispering-aspen-grove-5: #F2FBFB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-aspen-grove": {
        1: "#5A7E7A",
        2: "#83A9A7",
        3: "#B1D3D1",
        4: "#E5F7F6",
        5: "#F2FBFB",
      }
    }
  }
}

Hex values

Color 1#5A7E7A

Color 2#83A9A7

Color 3#B1D3D1

Color 4#E5F7F6

Color 5#F2FBFB

Accessibility

Contrast checker

1.7:1Fail

2.8:1Fail

4:1AA18

4.2:1AA18

1.7:1Fail

1.6:1Fail

2.3:1Fail

2.4:1Fail

2.8:1Fail

1.6:1Fail

1.4:1Fail

1.5:1Fail

4:1AA18

2.3:1Fail

1.4:1Fail

1.1:1Fail

4.2:1AA18

2.4:1Fail

1.5:1Fail

1.1:1Fail

Similar palettes

More like Whispering Aspen Grove

View all cool

Nordic Spruce Silhouette

Agate Grotto

Dawn Lake Whisper

Emerald Bough Serene

Enchanted Forest Stream

Forest Canopy Mist