Palette

Whispering Pine

A serene palette inspired by the quiet wisdom of ancient pine forests, blending deep greens with cool grays.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#5F9EA0#6B8E23#8FBC8F#A9A9A9

Palette guide

How to use Whispering Pine

Overview

The Whispering Pine palette draws inspiration from the serene wisdom of ancient pine forests, blending deep, cool greens with contemplative grays. This unique collection features the profound #2F4F4F, a dark slate green, alongside the muted teal of #5F9EA0 and the earthy olive of #6B8E23. The integration of #A9A9A9 provides a sophisticated neutral balance. Designers can utilize this palette to craft natural, grounded, yet elegant digital experiences, robust branding, or editorial layouts. Developers will find these colors suitable for creating complex, layered UIs, subtle gradients, and data visualizations that convey both nature and professionalism.

Best used for

corporate sustainability reports
architectural design firms
premium natural product packaging
environmental consulting websites
heritage brand identities
eco-conscious tech platforms

Suggested color roles

primary

#2F4F4F serves as a strong, sophisticated primary color for main navigation, headers, or backgrounds requiring deep contrast and gravitas.

secondary

#5F9EA0 is ideal for subheadings, content panels, or secondary calls to action, offering a cool, balanced mid-tone.

accent

#6B8E23 acts as a distinctive accent, perfect for calls to action, interactive elements, or subtle graphic details, providing an earthy pop.

background

#A9A9A9 can be used for clean, neutral backgrounds, providing a soft gray canvas that allows the greens to stand out with understated elegance.

text

For text on lighter backgrounds like #A9A9A9, a dark charcoal or black is recommended. On darker shades like #2F4F4F, use white or a very light gray for maximum readability.

Accessibility notes

Ensure sufficient contrast for text on #A9A9A9 backgrounds, using dark text.
#2F4F4F provides excellent contrast for white or light-colored text.
Be cautious with #8FBC8F for small text, especially against #A9A9A9, as contrast might be low.
Test the contrast of #5F9EA0 with both light and dark text to ensure WCAG AA compliance for various uses.

Recommended combinations

Forest & Stone

Combine the deep green with neutral gray for a sophisticated base, using the olive green for an earthy accent.

#2F4F4F · #A9A9A9 · #6B8E23

Misty Pines

Creates a cool, serene atmosphere; mid-tones for layered content, with the darkest for strong headings or borders.

#5F9EA0 · #8FBC8F · #2F4F4F

Earthy Balance

A balanced blend of earthy green, cool gray, and muted teal, suitable for balanced, natural-themed layouts.

#6B8E23 · #A9A9A9 · #5F9EA0

CSS variables

:root {
  --whispering-pine-1: #2F4F4F;
  --whispering-pine-2: #5F9EA0;
  --whispering-pine-3: #6B8E23;
  --whispering-pine-4: #8FBC8F;
  --whispering-pine-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-pine": {
        1: "#2F4F4F",
        2: "#5F9EA0",
        3: "#6B8E23",
        4: "#8FBC8F",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#5F9EA0

Color 3#6B8E23

Color 4#8FBC8F

Color 5#A9A9A9

Accessibility

Contrast checker

2.9:1Fail

2.3:1Fail

4.1:1AA18

3.8:1AA18

2.9:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

2.3:1Fail

1.2:1Fail

1.8:1Fail

1.6:1Fail

4.1:1AA18

1.4:1Fail

1.8:1Fail

1.1:1Fail

3.8:1AA18

1.3:1Fail

1.6:1Fail

1.1:1Fail

Similar palettes

More like Whispering Pine

View all earth

Gentle Stream Pebbles

Mossy Forest Path

Mystical Forest Floor

Forest Fern Canopy

Forest Floor Echo

Forest Path Tones