Palette

Misty Mountain Fir

Captures the quiet, ethereal essence of a mountain range shrouded in mist and ancient fir trees.

coolcalm5 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

#34495E#5D708B#9DB2BF#A7B9AC#CED8D5

Palette guide

How to use Misty Mountain Fir

Overview

The Misty Mountain Fir palette captures the quiet, ethereal essence of a mountain range shrouded in mist and ancient fir trees. Featuring sophisticated muted tones like the deep #34495E, the mid-range #5D708B, and the softer #CED8D5, this palette is an excellent choice for designers and developers. It's ideal for projects that demand a sense of calm professionalism, understated luxury, and a connection to nature. The cool, grey-green hues are versatile, suitable for corporate branding, minimalist UI designs, or high-end natural product aesthetics.

Best used for

Corporate and luxury brand identities
Minimalist UI and web design
Nature-inspired tech products
High-end photography portfolios
Eco-conscious fashion or home goods
Sophisticated editorial layouts

Suggested color roles

primary

Utilize #34495E as a strong brand anchor or for prominent headings and navigation, conveying sophistication.

secondary

Employ #5D708B for supporting elements, subheadings, or secondary calls to action, maintaining a cohesive depth.

accent

Apply #A7B9AC for subtle highlights, interactive states, or graphic elements that need a gentle, natural lift.

background

Choose #CED8D5 as a light, sophisticated background, providing a clean and serene canvas.

text

For optimal readability, use #34495E for body text on light backgrounds like #CED8D5, ensuring strong contrast and elegance.

Accessibility notes

Ensure #34495E text on #CED8D5 meets WCAG AA contrast for body text, providing excellent readability.
Avoid using #9DB2BF or #A7B9AC for small text on light backgrounds, as they may lack sufficient contrast.
Always test contrast ratios for interactive elements to ensure they are easily discernible by all users.
The darkest shades are crucial for legibility; reserve lighter colors for backgrounds and decorative elements.

Recommended combinations

Deep Forest Fog

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

#34495E · #5D708B · #9DB2BF

Muted Ascent

Perfect for backgrounds, cards, or layered UI elements that require a soft, ethereal visual separation.

#CED8D5 · #A7B9AC · #5D708B

Fir Accent

Combine the light background with a deep primary and a subtle accent for elegant buttons or branding elements.

#CED8D5 · #34495E · #A7B9AC

CSS variables

:root {
  --misty-mountain-fir-1: #34495E;
  --misty-mountain-fir-2: #5D708B;
  --misty-mountain-fir-3: #9DB2BF;
  --misty-mountain-fir-4: #A7B9AC;
  --misty-mountain-fir-5: #CED8D5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-fir": {
        1: "#34495E",
        2: "#5D708B",
        3: "#9DB2BF",
        4: "#A7B9AC",
        5: "#CED8D5",
      }
    }
  }
}

Hex values

Color 1#34495E

Color 2#5D708B

Color 3#9DB2BF

Color 4#A7B9AC

Color 5#CED8D5

Accessibility

Contrast checker

1.8:1Fail

4.2:1AA18

4.5:1AA

6.4:1AA

1.8:1Fail

2.3:1Fail

2.4:1Fail

3.5:1AA18

4.2:1AA18

2.3:1Fail

1.1:1Fail

1.5:1Fail

4.5:1AA

2.4:1Fail

1.1:1Fail

1.4:1Fail

6.4:1AA

3.5:1AA18

1.5:1Fail

1.4:1Fail

Similar palettes

More like Misty Mountain Fir