Back to palettes

Palette

Whispering Pines Shade

Reflects the quiet, deep greens and browns of an ancient pine forest, shadowed and calm.

darkcalm5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Pines Shade 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 Pines Shade.

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

Data visualization

#2F3E46#354F52#52796F#84A783#CCDBDC

Palette guide

How to use Whispering Pines Shade

Overview

The Whispering Pines Shade palette reflects the quiet, deep greens and cool, almost blue-gray tones of an ancient pine forest, cloaked in shadow and calm. This sophisticated collection ranges from the profound, near-black #2F3E46 to the serene, light #CCDBDC. Designers can utilize these colors to create elegant, tranquil, and nature-inspired interfaces, robust branding, or editorial content that feels both grounded and ethereal. The harmonious transition between shades like #354F52 and #52796F offers excellent versatility for layered designs and subtle visual hierarchy. Developers will find these colors perfect for crafting soft gradients, immersive backgrounds, and serene user experiences.

Best used for

  • luxury eco-resort branding
  • meditation and wellness apps
  • high-end interior design concepts
  • sustainable product packaging
  • historical preservation websites
  • nature documentary graphics

Suggested color roles

primary

#2F3E46 serves as a deep, anchoring primary color for strong brand statements, navigation, or footer elements, providing sophisticated depth and gravitas.

secondary

#354F52 is ideal for subheadings, content blocks, or secondary calls to action, offering a rich, cool-toned green-gray.

accent

#84A783 can be used for subtle accents, interactive elements, or highlights where a soft, refreshing touch is desired without being overly bold.

background

#CCDBDC provides a clean, airy background, perfect for main content areas where readability and a sense of spaciousness are key.

text

For light backgrounds, a deep charcoal or black ensures optimal readability. On dark backgrounds like #2F3E46, use white or #CCDBDC for text.

Accessibility notes

  • Ensure sufficient contrast for text on #CCDBDC backgrounds; black or very dark gray is recommended.
  • #2F3E46 offers excellent contrast for light text, such as white or #CCDBDC.
  • Be cautious when using #84A783 for small text, especially against other mid-tones, as contrast may be insufficient.
  • Always check WCAG AA compliance for interactive elements, ensuring clear readability for button text.

Recommended combinations

Deep Shade

Use darkest for main structure, cool mid-tone for content, and lightest for backgrounds or text on dark elements, creating depth.

#2F3E46 · #354F52 · #CCDBDC

Misty Canopy

Creates an airy, illuminated feel; lightest as background, mid-tones for content and subtle visual hierarchy.

#CCDBDC · #84A783 · #52796F

Forest Layers

A harmonious blend for layered UI components, with #2F3E46 defining strong boundaries and #354F52 providing structure.

#354F52 · #52796F · #2F3E46

CSS variables

:root {
  --whispering-pines-shade-1: #2F3E46;
  --whispering-pines-shade-2: #354F52;
  --whispering-pines-shade-3: #52796F;
  --whispering-pines-shade-4: #84A783;
  --whispering-pines-shade-5: #CCDBDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-pines-shade": {
        1: "#2F3E46",
        2: "#354F52",
        3: "#52796F",
        4: "#84A783",
        5: "#CCDBDC",
      }
    }
  }
}

Related searches

dark forest green palettecool green-gray colorstranquil nature UIsophisticated green brandingcalm web design palette

Palette colors

Hex values

Color 1#2F3E46
·
Color 2#354F52
·
Color 3#52796F
·
Color 4#84A783
·
Color 5#CCDBDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.3:1Fail
4.1:1AA18
7.8:1AAA
2
1.3:1Fail
1.8:1Fail
3.3:1AA18
6.2:1AA
3
2.3:1Fail
1.8:1Fail
1.8:1Fail
3.4:1AA18
4
4.1:1AA18
3.3:1AA18
1.8:1Fail
1.9:1Fail
5
7.8:1AAA
6.2:1AA
3.4:1AA18
1.9:1Fail

Similar palettes

More like Whispering Pines Shade

View all dark
Dusky Forest Whispers
Deep Forest Solace
Ancient Fern Whisper
Misty Spruce Grove
Ocean Kelp Forest
Whispering Forest Haze