Back to palettes

Palette

Foggy Pine Retreat

Serene, muted greens and grays that evoke the peaceful solitude of a pine forest shrouded in a morning fog.

NeutralCalm5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A5D5A#6E8481#97AFA9#3A4A48#293634

Palette guide

How to use Foggy Pine Retreat

Overview

The Foggy Pine Retreat palette offers serene, muted greens and grays that evoke the peaceful solitude of a pine forest shrouded in morning fog. This neutral collection, ranging from deep #293634 to lighter #97AFA9, is perfect for projects seeking a calming, nature-inspired, and sophisticated aesthetic. Designers and developers can utilize these harmonious tones to create tranquil digital experiences, eco-conscious branding, or cozy 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

  • Eco-friendly product packaging and branding
  • Wellness and spa retreat websites
  • Nature photography portfolios
  • Minimalist interior design concepts
  • Calming digital interfaces for apps
  • Sustainable fashion brand aesthetics

Suggested color roles

primary

Use #4A5D5A for main content, strong typography, or foundational elements to establish a grounding presence.

secondary

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

accent

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

background

The deep #293634 serves as an excellent immersive background, allowing lighter elements to softly emerge, enhancing the foggy feel.

text

#97AFA9 or white offers optimal readability on darker backgrounds like #293634 or #3A4A48, maintaining the serene mood.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter shades like #97AFA9 on #6E8481.
  • For critical information, use white or #97AFA9 against the darkest backgrounds like #293634.
  • Avoid using mid-tone colors for small text on similarly toned backgrounds, as readability may suffer.
  • The dark backgrounds require light text; always check contrast ratios for compliance.

Recommended combinations

Deep Forest

For creating a rich, deep, and immersive aesthetic, ideal for dark mode or dramatic backgrounds.

#293634 · #3A4A48 · #4A5D5A

Misty Pines

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

#6E8481 · #97AFA9 · #4A5D5A

Calm Canopy

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

#3A4A48 · #6E8481 · #97AFA9

CSS variables

:root {
  --foggy-pine-retreat-1: #4A5D5A;
  --foggy-pine-retreat-2: #6E8481;
  --foggy-pine-retreat-3: #97AFA9;
  --foggy-pine-retreat-4: #3A4A48;
  --foggy-pine-retreat-5: #293634;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "foggy-pine-retreat": {
        1: "#4A5D5A",
        2: "#6E8481",
        3: "#97AFA9",
        4: "#3A4A48",
        5: "#293634",
      }
    }
  }
}

Related searches

muted green greypine forest palettecalm nature colorsserene design themeeco friendly branding

Palette colors

Hex values

Color 1#4A5D5A
·
Color 2#6E8481
·
Color 3#97AFA9
·
Color 4#3A4A48
·
Color 5#293634
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3:1AA18
1.3:1Fail
1.8:1Fail
2
1.8:1Fail
1.7:1Fail
2.3:1Fail
3.2:1AA18
3
3:1AA18
1.7:1Fail
4:1AA18
5.4:1AA
4
1.3:1Fail
2.3:1Fail
4:1AA18
1.3:1Fail
5
1.8:1Fail
3.2:1AA18
5.4:1AA
1.3:1Fail

Similar palettes

More like Foggy Pine Retreat

View all Neutral