Palette

Misty Mountain Fir

Deep forest greens and muted blues blend to capture the serene, cool essence of fir trees shrouded in mountain mist.

Coolnatural5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4682B4#5F9EA0#8FBC8F#6B8E23

Palette guide

How to use Misty Mountain Fir

Overview

The Misty Mountain Fir palette blends deep forest greens and muted blues to capture the serene, cool essence of fir trees shrouded in mountain mist. Featuring rich tones like #2F4F4F and #4682B4, alongside the natural #8FBC8F and vibrant #6B8E23, this palette is a powerful choice for designers and developers. It's ideal for projects that aim to evoke nature, ruggedness, and tranquility, offering a versatile range of cool, earthy hues suitable for outdoor brands, environmental initiatives, or rustic-chic aesthetics in both digital and print.

Best used for

Outdoor adventure and gear brands
Environmental and conservation organizations
Natural and organic product packaging
Rustic or cabin-style interior design
Gaming interfaces for fantasy or nature themes
Eco-tourism websites

Suggested color roles

primary

Utilize #2F4F4F as a strong brand color or for main content areas, conveying depth and natural authority.

secondary

Employ #4682B4 for supporting elements, subheadings, or secondary graphics, offering a cool, refreshing contrast.

accent

Reserve #6B8E23 for vibrant highlights, calls to action, or important interactive elements, adding a natural pop.

background

Choose #8FBC8F as a lighter, natural base, providing an earthy yet serene canvas for content.

text

For optimal readability, use #2F4F4F for body text on light backgrounds like #8FBC8F, ensuring clear contrast and a natural feel.

Accessibility notes

Ensure #2F4F4F or #4682B4 text on #8FBC8F meets WCAG AA contrast for body text; #8FBC8F itself is too light for text.
Avoid using #5F9EA0 for small text or critical information on light backgrounds, as contrast may be insufficient.
Always test contrast ratios for interactive elements to ensure they are easily discernible for all users, especially #6B8E23.
The darker shades provide excellent contrast; leverage them for important content and primary text.

Recommended combinations

Forest Depths

Ideal for dark mode themes, strong section backgrounds, or impactful headers that convey depth and mystery.

#2F4F4F · #4682B4 · #5F9EA0

Fir Highlight

Combine the light background with a vibrant accent and a deep primary for striking buttons or eco-friendly branding.

#8FBC8F · #6B8E23 · #2F4F4F

Misty Greens

Excellent for natural gradients, illustrations, or decorative elements that evoke a soft, misty forest.

#5F9EA0 · #8FBC8F · #6B8E23

CSS variables

:root {
  --misty-mountain-fir-2-1: #2F4F4F;
  --misty-mountain-fir-2-2: #4682B4;
  --misty-mountain-fir-2-3: #5F9EA0;
  --misty-mountain-fir-2-4: #8FBC8F;
  --misty-mountain-fir-2-5: #6B8E23;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-fir-2": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#5F9EA0",
        4: "#8FBC8F",
        5: "#6B8E23",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4682B4

Color 3#5F9EA0

Color 4#8FBC8F

Color 5#6B8E23

Accessibility

Contrast checker

2.2:1Fail

2.9:1Fail

4.1:1AA18

2.3:1Fail

2.2:1Fail

1.3:1Fail

1.9:1Fail

1.1:1Fail

2.9:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

4.1:1AA18

1.9:1Fail

1.4:1Fail

1.8:1Fail

2.3:1Fail

1.1:1Fail

1.2:1Fail

1.8:1Fail

Similar palettes

More like Misty Mountain Fir

View all Cool

Orchard Harvest Purple

Tranquil Morning Mist

Aegean Shoreline Treasures

Bamboo Garden Calm

Frosty Pine Winter

Misty Mountain Peaks