Back to palettes

Palette

Foggy Pine Woods

Ethereal cool greens and muted grays, capturing the quiet solitude of a foggy pine forest.

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

#E7ECE8#C6D1CA#A1B4AF#7B9691#5C7671

Palette guide

How to use Foggy Pine Woods

Overview

The Foggy Pine Woods palette offers ethereal cool greens and muted grays, capturing the quiet solitude of a pine forest shrouded in mist. Ranging from almost-white #E7ECE8 to deep #5C7671, this collection is perfect for projects seeking a tranquil, nature-inspired, and sophisticated aesthetic. Designers and developers can utilize these harmonious tones to create serene digital experiences, gentle branding, or calming user interfaces. The subtle shifts in shade provide depth and a sense of quietude, making it ideal for projects that aim to convey peace, natural elegance, or introspective calm.

Best used for

  • Spa and wellness branding and websites
  • Nature-inspired home decor products
  • Calm digital interfaces for apps
  • Environmental advocacy organizations
  • Serene photography portfolios
  • Minimalist fashion brand aesthetics

Suggested color roles

primary

Use #7B9691 for main content, strong typography, or foundational elements to establish a grounding, gentle presence.

secondary

Apply #A1B4AF for supporting text, navigation, or subtle dividers, offering a gentle contrast.

accent

Utilize #C6D1CA for soft highlights, interactive states, or delicate graphical details, providing gentle emphasis.

background

The very light #E7ECE8 serves as an excellent primary background, creating a clean, airy, and expansive canvas.

text

#5C7671 or a dark charcoal provides optimal readability on lighter backgrounds like #E7ECE8 or #C6D1CA.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter shades like #C6D1CA on #E7ECE8, which may be too low.
  • For critical information, use darker text colors such as #5C7671 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

Misty Canopy

For creating a light, ethereal feel, perfect for header areas or clean UI elements.

#E7ECE8 · #C6D1CA · #A1B4AF

Pine Depth

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

#5C7671 · #7B9691 · #A1B4AF

Forest Calm

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

#C6D1CA · #7B9691 · #E7ECE8

CSS variables

:root {
  --foggy-pine-woods-2-1: #E7ECE8;
  --foggy-pine-woods-2-2: #C6D1CA;
  --foggy-pine-woods-2-3: #A1B4AF;
  --foggy-pine-woods-2-4: #7B9691;
  --foggy-pine-woods-2-5: #5C7671;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "foggy-pine-woods-2": {
        1: "#E7ECE8",
        2: "#C6D1CA",
        3: "#A1B4AF",
        4: "#7B9691",
        5: "#5C7671",
      }
    }
  }
}

Related searches

cool green grey palettefoggy forest colorsserene pine thememuted nature UIquiet aesthetic

Palette colors

Hex values

Color 1#E7ECE8
·
Color 2#C6D1CA
·
Color 3#A1B4AF
·
Color 4#7B9691
·
Color 5#5C7671
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.7:1Fail
4.1:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
3.1:1AA18
3
1.8:1Fail
1.4:1Fail
1.5:1Fail
2.3:1Fail
4
2.7:1Fail
2:1Fail
1.5:1Fail
1.5:1Fail
5
4.1:1AA18
3.1:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Foggy Pine Woods

View all cool
Enchanted Grove Mist
Fjorden Mist Calm
Foggy Pine Woods
Frosted Evergreen Mist
Misted Woodland Path
Misty Forest Glade