Back to palettes

Palette

Misty Pine Forest

A cool, muted palette that captures the serene and enigmatic atmosphere of a pine forest shrouded in mist, peaceful and deep.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B5320#6B8E23#2F4F4F#708090#A9A9A9

Palette guide

How to use Misty Pine Forest

Overview

The Misty Pine Forest palette captures the serene and enigmatic atmosphere of a pine forest shrouded in mist, using a cool, muted range of greens and greys. This collection features the deep #2F4F4F (Dark Slate Gray), the rich #4B5320 (Dark Olive Green), and the vibrant #6B8E23 (Olive Drab), complemented by the calming #708090 (Slate Gray) and #A9A9A9 (Dark Gray). Designers and developers can leverage this palette to create designs that feel natural, grounded, and peacefully contemplative. It's an excellent choice for projects aiming to evoke sustainability, outdoor adventure, or a quiet, earthy elegance.

Best used for

  • Eco-friendly brand identity
  • Outdoor adventure gear marketing
  • Natural product packaging design
  • Sustainable architecture visualizations
  • Rustic home decor and interiors
  • Nature photography and documentary branding

Suggested color roles

primary

Use #2F4F4F as a deep, anchoring primary color for main headings, footers, or dominant brand elements. It provides strong visual weight.

secondary

Employ #4B5320 for supportive content, subheadings, or as a background for sections that need a rich, earthy green presence.

accent

Apply #6B8E23 as a fresh, natural accent for interactive elements, calls to action, or to add a vibrant touch of forest green.

background

Utilize #A9A9A9 as a soft, misty background color for main content areas, allowing darker elements to stand out. #708090 can be used for secondary background layers.

text

For optimal readability on lighter backgrounds, use #2F4F4F or a deep forest green. For darker backgrounds, white or a very light grey is recommended.

Accessibility notes

  • Ensure sufficient contrast when pairing #A9A9A9 with lighter text; use dark text for optimal readability.
  • Test text readability of #708090 on backgrounds like #A9A9A9 to meet WCAG AA standards for small text.
  • Prioritize #2F4F4F for critical text on light backgrounds to ensure maximum legibility.
  • Be mindful of contrast when using #6B8E23 as an accent on other greens or greys; ensure it clearly stands out.

Recommended combinations

Forest Floor

Creates a grounded, natural feel with deep greens and a misty grey backdrop. Ideal for nature-themed designs.

#2F4F4F · #4B5320 · #A9A9A9

Misty Canopy

Perfect for layering, using the mid-grey as a base, bright green for highlights, and dark grey for strong accents.

#708090 · #6B8E23 · #2F4F4F

Earthy Calm

Provides a balanced, serene aesthetic. #4B5320 for key elements, #A9A9A9 for background, and #708090 for supportive text.

#4B5320 · #A9A9A9 · #708090

CSS variables

:root {
  --misty-pine-forest-1: #4B5320;
  --misty-pine-forest-2: #6B8E23;
  --misty-pine-forest-3: #2F4F4F;
  --misty-pine-forest-4: #708090;
  --misty-pine-forest-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-pine-forest": {
        1: "#4B5320",
        2: "#6B8E23",
        3: "#2F4F4F",
        4: "#708090",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

pine forest palettemisty green greynatural earth tonesserene forest colorsoutdoor brand palette

Palette colors

Hex values

Color 1#4B5320
·
Color 2#6B8E23
·
Color 3#2F4F4F
·
Color 4#708090
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
1.1:1Fail
2:1Fail
3.5:1AA18
2
2.2:1Fail
2.3:1Fail
1.1:1Fail
1.6:1Fail
3
1.1:1Fail
2.3:1Fail
2.2:1Fail
3.8:1AA18
4
2:1Fail
1.1:1Fail
2.2:1Fail
1.7:1Fail
5
3.5:1AA18
1.6:1Fail
3.8:1AA18
1.7:1Fail

Similar palettes

More like Misty Pine Forest

View all earth
Forest Canopy Echoes
Gentle Forest Nook
Jade Forest Canopy
Lush Fern Canopy
Mossy Glen
Mystic Forest Dweller