Back to palettes

Palette

Foggy Pine Woods

Cool greys and muted greens capturing the serene, hushed atmosphere of a pine forest shrouded in fog.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#708090#98FB98#8FBC8F#A9A9A9#5F9EA0

Palette guide

How to use Foggy Pine Woods

Overview

The Foggy Pine Woods palette offers cool greys and muted greens, capturing the serene, hushed atmosphere of a pine forest shrouded in fog. This cool collection, featuring slate grey #708090, vibrant lime #98FB98, and sea green #5F9EA0, is perfect for projects seeking a tranquil, nature-inspired, and sophisticated aesthetic. Designers and developers can utilize these harmonious tones to create peaceful digital experiences, outdoor branding, or calming user interfaces. The blend of natural greens with grounding greys provides depth and a sense of quietude, ideal for conveying peace, natural elegance, or introspective calm.

Best used for

  • Nature-focused branding and websites
  • Outdoor apparel and gear design
  • Environmental education platforms
  • Tranquil digital experiences and apps
  • Forestry and conservation organizations
  • Serene photography portfolios

Suggested color roles

primary

Use #708090 for main content, strong typography, or foundational elements to establish a stable presence.

secondary

Apply #8FBC8F for supporting text, navigation, or subtle dividers, offering a gentle green contrast.

accent

Utilize #98FB98 for bright highlights, interactive states, or delicate graphical details, providing a fresh pop.

background

The neutral #A9A9A9 serves as an excellent primary background, creating a clean, airy, and expansive canvas.

text

#5F9EA0 or a dark charcoal provides optimal readability on lighter backgrounds like #A9A9A9 or #8FBC8F.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #98FB98 on #A9A9A9, which may need careful checking.
  • For critical information, use darker text colors such as #708090 or black against the lightest backgrounds.
  • Avoid using mid-tone colors for small text on similarly toned backgrounds, as readability may suffer.
  • Provide ample spacing and clear typography to enhance readability within this subtle palette.

Recommended combinations

Forest Glade

For creating a vibrant, natural feel, perfect for header areas or clean UI elements with a green emphasis.

#98FB98 · #8FBC8F · #708090

Misty Path

Ideal for layered designs, adding depth to sections while maintaining a tranquil, natural atmosphere.

#A9A9A9 · #708090 · #5F9EA0

Tranquil Canopy

A balanced trio for defining clear sections and providing visual hierarchy in nature-inspired designs.

#8FBC8F · #5F9EA0 · #A9A9A9

CSS variables

:root {
  --foggy-pine-woods-1: #708090;
  --foggy-pine-woods-2: #98FB98;
  --foggy-pine-woods-3: #8FBC8F;
  --foggy-pine-woods-4: #A9A9A9;
  --foggy-pine-woods-5: #5F9EA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "foggy-pine-woods": {
        1: "#708090",
        2: "#98FB98",
        3: "#8FBC8F",
        4: "#A9A9A9",
        5: "#5F9EA0",
      }
    }
  }
}

Related searches

green grey naturepine forest colorstranquil cool palettemisty woodland designserene outdoor theme

Palette colors

Hex values

Color 1#708090
·
Color 2#98FB98
·
Color 3#8FBC8F
·
Color 4#A9A9A9
·
Color 5#5F9EA0
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
1.9:1Fail
1.7:1Fail
1.3:1Fail
2
3.2:1AA18
1.7:1Fail
1.9:1Fail
2.4:1Fail
3
1.9:1Fail
1.7:1Fail
1.1:1Fail
1.4:1Fail
4
1.7:1Fail
1.9:1Fail
1.1:1Fail
1.3:1Fail
5
1.3:1Fail
2.4:1Fail
1.4:1Fail
1.3:1Fail

Similar palettes

More like Foggy Pine Woods

View all cool
Enchanted Grove Mist
Misty Forest Veil
Deep Forest Lull
Emerald Valley Mist
Frosted Evergreen Haze
Frosted Evergreen Mist