Palette

Whispering Pine Shadow

Captures the quiet, deep greens of a sun-dappled pine forest, full of cool shadows and distant light.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A3E2D#3F6E5A#6D9E8A#A6CEBC#DDF3EA

Palette guide

How to use Whispering Pine Shadow

Overview

The Whispering Pine Shadow palette beautifully captures the quiet, deep greens of a sun-dappled pine forest, full of cool shadows and distant light. This sophisticated gradient moves from the profound, near-black green of #1A3E2D to the airy, almost translucent #DDF3EA. Designers can leverage this palette to create elegant, tranquil, and nature-inspired interfaces, branding, or editorial content. The harmonious transition between shades like #3F6E5A and #6D9E8A 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 spa branding
meditation apps
eco-friendly product design
high-end interior design concepts
wellness and retreat centers
sustainable fashion websites

Suggested color roles

primary

#1A3E2D serves as a deep, anchoring primary color for strong brand statements, navigation, or footer elements, providing sophisticated depth.

secondary

#3F6E5A is ideal for subheadings, content blocks, or secondary calls to action, offering a rich, balanced green.

accent

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

background

#DDF3EA 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 #1A3E2D, use white or #DDF3EA for text.

Accessibility notes

Ensure sufficient contrast for text on #DDF3EA backgrounds; black or very dark gray is recommended.
#1A3E2D offers excellent contrast for light text, such as white or #DDF3EA.
Be cautious when using #A6CEBC 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 Shadows

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

#1A3E2D · #3F6E5A · #DDF3EA

Forest Light

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

#DDF3EA · #A6CEBC · #6D9E8A

Verdant Layers

A harmonious blend for layered UI components, with #1A3E2D defining strong boundaries and #3F6E5A providing structure.

#3F6E5A · #6D9E8A · #1A3E2D

CSS variables

:root {
  --whispering-pine-shadow-1: #1A3E2D;
  --whispering-pine-shadow-2: #3F6E5A;
  --whispering-pine-shadow-3: #6D9E8A;
  --whispering-pine-shadow-4: #A6CEBC;
  --whispering-pine-shadow-5: #DDF3EA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-pine-shadow": {
        1: "#1A3E2D",
        2: "#3F6E5A",
        3: "#6D9E8A",
        4: "#A6CEBC",
        5: "#DDF3EA",
      }
    }
  }
}

Hex values

Color 1#1A3E2D

Color 2#3F6E5A

Color 3#6D9E8A

Color 4#A6CEBC

Color 5#DDF3EA

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

6.9:1AA

10.2:1AAA

2:1Fail

1.9:1Fail

3.4:1AA18

5:1AA

3.9:1AA18

1.9:1Fail

1.8:1Fail

2.6:1Fail

6.9:1AA

3.4:1AA18

1.8:1Fail

1.5:1Fail

10.2:1AAA

5:1AA

2.6:1Fail

1.5:1Fail

Similar palettes

More like Whispering Pine Shadow

View all earth

Forest Undergrowth Blend

Northern Pine Woods

Whispering Pine Needles

Ancient Forest Hush

Ancient Forest Realm

Ancient Jade Temple