Palette

Pine Forest Echo

Muted greens and cool grays reflect the serene quiet and subtle colors of a pine forest.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4A7D5C#6A997D#8CB29E#AEC0B0

Palette guide

How to use Pine Forest Echo

Overview

The Pine Forest Echo palette evokes the serene quiet and subtle, muted tones of a deep evergreen forest. It features a strong, dark #2F4F4F (Dark Slate Gray) as its foundation, reminiscent of shadows and sturdy tree trunks. This is complemented by a gradient of natural greens: #4A7D5C, #6A997D, #8CB29E, and the very light #AEC0B0. These shades transition from deep forest greens to softer, almost silvery-green hues, reflecting light filtering through pine needles. This palette is perfect for projects that aim to convey calmness, natural authenticity, and a sense of peaceful retreat.

Best used for

Eco-friendly product branding
Wellness and spa websites
Outdoor adventure gear design
Nature photography portfolios
Sustainable living blogs
Calm interior design concepts

Suggested color roles

primary

Use #2F4F4F (Dark Slate Gray) as a grounding, sophisticated base for backgrounds, navigation, or strong structural elements.

secondary

Employ #4A7D5C as a rich, deep green suitable for headings, important buttons, or accent panels, connecting to nature.

accent

Apply #8CB29E as a lighter, more refreshing green ideal for subtle highlights, interactive states, or decorative elements.

background

#AEC0B0 (Light Grayish Green) or a very light cream provides a soft, airy backdrop that complements the deeper greens.

text

For dark backgrounds like #2F4F4F, use a crisp white or #AEC0B0. For lighter backgrounds, a deep charcoal or #2F4F4F ensures excellent readability.

Accessibility notes

#2F4F4F offers strong contrast for white or light-colored text.
Be cautious with lighter greens like #8CB29E or #AEC0B0 for small text, especially against light backgrounds.
Ensure interactive elements have sufficient contrast in both normal and hover/focus states.
Use a contrast checker to verify all text and background pairings meet WCAG guidelines.

Recommended combinations

Forest Depths

For main content areas, providing depth and a natural feel with good text contrast.

#2F4F4F · #4A7D5C · #8CB29E

Misty Greens

Ideal for subtle patterns, secondary information, or a softer brand presence.

#6A997D · #AEC0B0 · #2F4F4F

Natural Accents

Use for calls-to-action, icons, or illustrations to bring out specific details.

#4A7D5C · #AEC0B0 · #2F4F4F

CSS variables

:root {
  --pine-forest-echo-1: #2F4F4F;
  --pine-forest-echo-2: #4A7D5C;
  --pine-forest-echo-3: #6A997D;
  --pine-forest-echo-4: #8CB29E;
  --pine-forest-echo-5: #AEC0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pine-forest-echo": {
        1: "#2F4F4F",
        2: "#4A7D5C",
        3: "#6A997D",
        4: "#8CB29E",
        5: "#AEC0B0",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4A7D5C

Color 3#6A997D

Color 4#8CB29E

Color 5#AEC0B0

Accessibility

Contrast checker

1.9:1Fail

2.7:1Fail

3.8:1AA18

4.7:1AA

1.9:1Fail

1.5:1Fail

2:1Fail

2.5:1Fail

2.7:1Fail

1.5:1Fail

1.4:1Fail

1.7:1Fail

3.8:1AA18

2:1Fail

1.4:1Fail

1.2:1Fail

4.7:1AA

2.5:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Pine Forest Echo

View all earth

Ancient Moss Whisper

Emerald Moss Glade

Enchanted Forest Mist

Forest Floor Moss

Forest Moss Carpet

Forest Whisper Green