Palette

Whispering Pine Forest

Cool, crisp greens capturing the serene and refreshing atmosphere of a sun-dappled pine forest.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4F41#597D66#78AB8B#97D9B1#B6F6D6

Palette guide

How to use Whispering Pine Forest

Overview

The Whispering Pine Forest palette presents a refreshing spectrum of cool, crisp greens that perfectly encapsulate a serene woodland atmosphere. Ranging from the deep, grounding #3A4F41 to the light, airy #B6F6D6, this collection offers designers a versatile toolkit for creating natural and calming digital experiences. The mid-tones like #78AB8B provide excellent flexibility for various UI components, while #597D66 adds a touch of verdant depth. Developers can employ these shades for harmonious gradients, background textures, or subtle hover states. This palette is particularly effective for projects aiming to convey freshness, sustainability, or a sense of peaceful retreat.

Best used for

eco-conscious branding
outdoor adventure websites
meditation apps
botanical illustrations
sustainable product packaging
wellness retreats promotion

Suggested color roles

primary

Use #3A4F41 for robust elements such as headers, footers, or main calls to action, providing a strong, dark anchor.

secondary

#597D66 is ideal for sub-sections, informational panels, or secondary buttons, offering a balanced and inviting green.

accent

#97D9B1 serves as a bright, crisp accent for interactive elements, progress indicators, or subtle graphic details, bringing a fresh pop.

background

#B6F6D6 offers a light, breathable background, perfect for content areas where readability and a clean aesthetic are paramount.

text

For optimal legibility on light backgrounds, a dark charcoal or black is recommended. On darker shades like #3A4F41, use #B6F6D6 for text.

Accessibility notes

Ensure strong contrast for text on #B6F6D6 backgrounds; black or very dark gray is best.
#3A4F41 provides good contrast for light text, such as #B6F6D6.
Be mindful of using #97D9B1 for small text, especially against mid-tones like #78AB8B, as contrast might be low.
Always check WCAG AA compliance for interactive elements, particularly button text on colored backgrounds.

Recommended combinations

Deep Forest

Use darkest for main structure, mid-tone for content blocks, and lightest for text or highlights, creating depth.

#3A4F41 · #597D66 · #B6F6D6

Fresh Growth

Excellent for a light and airy feel; lightest as background, second lightest for accents, and mid-tone for headings.

#B6F6D6 · #97D9B1 · #78AB8B

Pine Shade

A harmonious blend for layered UI, where #3A4F41 can define boundaries and #597D66 provides structure.

#597D66 · #78AB8B · #3A4F41

CSS variables

:root {
  --whispering-pine-forest-3-1: #3A4F41;
  --whispering-pine-forest-3-2: #597D66;
  --whispering-pine-forest-3-3: #78AB8B;
  --whispering-pine-forest-3-4: #97D9B1;
  --whispering-pine-forest-3-5: #B6F6D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-pine-forest-3": {
        1: "#3A4F41",
        2: "#597D66",
        3: "#78AB8B",
        4: "#97D9B1",
        5: "#B6F6D6",
      }
    }
  }
}

Hex values

Color 1#3A4F41

Color 2#597D66

Color 3#78AB8B

Color 4#97D9B1

Color 5#B6F6D6

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.4:1AA

7.2:1AAA

1.9:1Fail

1.8:1Fail

2.8:1Fail

3.8:1AA18

3.4:1AA18

1.8:1Fail

1.6:1Fail

2.1:1Fail

5.4:1AA

2.8:1Fail

1.6:1Fail

1.3:1Fail

7.2:1AAA

3.8:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Whispering Pine Forest

View all Cool

Rain-Kissed Ferns

Ancient Cypress Shade

Enchanted Teal Forest

Frosty Pine Winter

Aurora Veil Dance

Ethereal Garden Dew