Back to palettes

Palette

Northern Pine Woods

A tranquil blend of deep greens and cool greys, inspired by the quiet majesty of a northern pine forest.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E403D#4A605A#6C847E#94A8A2#BCCDC8

Palette guide

How to use Northern Pine Woods

Overview

The Northern Pine Woods palette is a tranquil blend of deep greens and cool greys, inspired by the quiet majesty of a northern pine forest. This earthy collection features the profound #2E403D (Dark Hunter Green) and the harmonious #4A605A (Pine Green), transitioning into the calm #6C847E (Ash Gray). The lighter, misty tones of #94A8A2 (Light Grayish Green) and #BCCDC8 (Pale Grayish Green) complete the set, offering a serene and natural range for designs. Designers and developers can leverage this palette to create grounded, sophisticated, and calming digital environments that evoke the peace of nature.

Best used for

  • Eco-conscious brand websites
  • Nature-themed mobile applications
  • Outdoor adventure equipment branding
  • Minimalist interior design concepts
  • Relaxing educational content platforms
  • Photography portfolios (landscape, nature)

Suggested color roles

primary

Use #2E403D (Dark Hunter Green) as a dominant background or for strong foundational elements, establishing a deep, natural base.

secondary

Apply #4A605A (Pine Green) or #6C847E (Ash Gray) for content blocks, navigation, or subheadings, providing subtle depth and structure.

accent

Deploy #94A8A2 (Light Grayish Green) or #BCCDC8 (Pale Grayish Green) for soft highlights, interactive elements, or background textures.

background

The deep #2E403D creates an excellent, grounding canvas for lighter text, while #BCCDC8 offers a clean, airy base.

text

For dark backgrounds, #BCCDC8 offers good readability. For lighter backgrounds, a deep charcoal or #2E403D ensures optimal contrast.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing mid-tones like #6C847E with darker greens.
  • A true black or very dark charcoal will provide the best contrast for body text on #94A8A2 and #BCCDC8.
  • Avoid using #4A605A for small text on #2E403D backgrounds due to their similar values and potential low contrast.
  • The muted nature of this palette means careful attention to text size and weight is crucial for legibility across all color pairings.

Recommended combinations

Forest Depths

Ideal for robust hero sections, combining a deep hunter green with ash gray and a pale grayish green for a layered, natural feel.

#2E403D · #6C847E · #BCCDC8

Misty Pines

Excellent for content blocks or serene infographics, blending pine green and light grayish green with an ash gray accent.

#4A605A · #94A8A2 · #6C847E

Tranquil Path

Perfect for clean UI elements or icons, using pale grayish green as a light primary, grounded by deeper greens for sophistication.

#BCCDC8 · #2E403D · #4A605A

CSS variables

:root {
  --northern-pine-woods-1: #2E403D;
  --northern-pine-woods-2: #4A605A;
  --northern-pine-woods-3: #6C847E;
  --northern-pine-woods-4: #94A8A2;
  --northern-pine-woods-5: #BCCDC8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-pine-woods": {
        1: "#2E403D",
        2: "#4A605A",
        3: "#6C847E",
        4: "#94A8A2",
        5: "#BCCDC8",
      }
    }
  }
}

Related searches

pine forest color schemetranquil green grey palettenatural earthy tonescalm serene design colorshunter green ash gray combo

Palette colors

Hex values

Color 1#2E403D
·
Color 2#4A605A
·
Color 3#6C847E
·
Color 4#94A8A2
·
Color 5#BCCDC8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.4:1AA18
6.6:1AA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
4.1:1AA18
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
2.4:1Fail
4
4.4:1AA18
2.7:1Fail
1.6:1Fail
1.5:1Fail
5
6.6:1AA
4.1:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Northern Pine Woods

View all earth
Emerald Moss Canopy
Enchanted Forest Canopy
Enchanted Forest Glade
Enchanted Forest Glow
Enchanted Grove
Forest Fae Whisper