Back to palettes

Palette

Misty Mountain Pines

Evokes the tranquil, muted tones of a pine forest shrouded in a cool, gentle mist.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Mountain Pines 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 Mountain Pines.

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

Data visualization

#6E8F7F#4A6D5F#C2D6D3#36453F#7B8C86

Palette guide

How to use Misty Mountain Pines

Overview

The Misty Mountain Pines palette offers a serene and sophisticated collection of muted greens and cool greys, perfect for designs aiming for a tranquil, natural aesthetic. Anchored by the deep, grounding #36453F and the calming #4A6D5F, this palette evokes the peaceful stillness of a misty forest. The versatile #6E8F7F provides a balanced mid-tone, while #7B8C86 adds a softer, slightly warmer grey-green. The light, airy #C2D6D3 acts as a refreshing counterpoint, ideal for backgrounds or subtle highlights. This combination is particularly effective for creating a sense of calm and understated elegance, suitable for brands that prioritize nature, wellness, or timeless design. Developers will find these hex codes blend seamlessly for interfaces requiring a soft, cohesive visual experience.

Best used for

  • Eco-friendly brand identities and packaging
  • Spa, wellness, or meditation app interfaces
  • Nature photography portfolios and blogs
  • Sustainable product websites and e-commerce
  • Interior design mood boards for tranquil spaces
  • Environmental non-profit communication materials

Suggested color roles

primary

Utilize #4A6D5F as a foundational brand color for headers, main calls-to-action, or key graphical elements, conveying stability and depth.

secondary

Employ #6E8F7F for supporting sections, subheadings, or secondary buttons, providing a harmonious complement to the primary green.

accent

Introduce #C2D6D3 as a subtle highlight for small UI elements, active states, or delicate illustrations, offering a refreshing, airy touch.

background

Use #C2D6D3 for clean, expansive backgrounds, providing a light, open feel. For a slightly richer base, consider #7B8C86.

text

Set primary body text in #36453F for excellent readability against lighter backgrounds, offering a soft alternative to pure black. For secondary text, #4A6D5F works well.

Accessibility notes

  • Ensure #36453F text has sufficient contrast against #C2D6D3 and #7B8C86 backgrounds for WCAG AA compliance.
  • Avoid using #C2D6D3 for small text on very light backgrounds as contrast may be insufficient; reserve it for larger titles or accents.
  • Check contrast ratios for interactive elements like buttons and links, especially when using lighter colors like #6E8F7F on #C2D6D3.
  • Consider using a slightly darker version of #36453F or standard charcoal for critical text if #36453F doesn't pass all contrast checks on specific light backgrounds.

Recommended combinations

Deep Forest

Ideal for a strong, grounding presence in headers or hero sections, emphasizing natural depth and stability.

#36453F · #4A6D5F · #6E8F7F

Misty Light

Perfect for creating an airy, serene feel in backgrounds, secondary content areas, or gentle UI elements.

#C2D6D3 · #7B8C86 · #6E8F7F

Pine & Stone

A balanced trio for general content blocks, offering clear hierarchy with a touch of natural elegance.

#4A6D5F · #C2D6D3 · #7B8C86

CSS variables

:root {
  --misty-mountain-pines-2-1: #6E8F7F;
  --misty-mountain-pines-2-2: #4A6D5F;
  --misty-mountain-pines-2-3: #C2D6D3;
  --misty-mountain-pines-2-4: #36453F;
  --misty-mountain-pines-2-5: #7B8C86;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-pines-2": {
        1: "#6E8F7F",
        2: "#4A6D5F",
        3: "#C2D6D3",
        4: "#36453F",
        5: "#7B8C86",
      }
    }
  }
}

Related searches

serene green grey palettemuted forest color schemetranquil nature colorscool earth tone palettecalm design colors

Palette colors

Hex values

Color 1#6E8F7F
·
Color 2#4A6D5F
·
Color 3#C2D6D3
·
Color 4#36453F
·
Color 5#7B8C86
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
2.8:1Fail
1:1Fail
2
1.6:1Fail
3.8:1AA18
1.8:1Fail
1.6:1Fail
3
2.3:1Fail
3.8:1AA18
6.7:1AA
2.3:1Fail
4
2.8:1Fail
1.8:1Fail
6.7:1AA
2.9:1Fail
5
1:1Fail
1.6:1Fail
2.3:1Fail
2.9:1Fail

Similar palettes

More like Misty Mountain Pines

View all earth
Ancient Moss Whisper
Pine Forest Echo
Tranquil Moss Path
Whispering Willow Shade
Bamboo Grove
Emerald Moss Glade