Back to palettes

Palette

Misty Mountain Path

Reflects the ethereal beauty of mountains shrouded in morning mist, calm and mysterious.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C99A4#B1BCC4#E0E4E7#6A7982#9AAAB5

Palette guide

How to use Misty Mountain Path

Overview

The "Misty Mountain Path" palette offers a serene and sophisticated collection of cool greys and muted blues, perfect for creating a tranquil atmosphere. With shades like the soft #E0E4E7, the mid-tone #B1BCC4, and the deeper #8C99A4, this palette evokes the quiet beauty of a landscape shrouded in morning fog. The slightly warmer, earthy undertones of #9AAAB5 and the grounding depth of #6A7982 provide subtle contrast and stability. Designers can leverage this neutral yet inviting scheme for projects requiring a sense of calm, professionalism, and understated elegance. Its versatility allows for a harmonious blend across various digital and print applications, ensuring a cohesive and peaceful user experience.

Best used for

  • Corporate websites and branding for calm industries (e.g., wellness, finance)
  • UI/UX designs for productivity apps or meditation tools
  • Interior design visualization for modern, minimalist spaces
  • Photography portfolios with a focus on nature or fine art
  • Editorial design for sophisticated magazines or reports
  • Eco-friendly product packaging and branding

Suggested color roles

primary

#8C99A4: A grounded, medium-dark grey-blue. Ideal for main headers, prominent UI elements, or as a dominant background color where a stable, professional feel is desired.

secondary

#B1BCC4: A lighter, airy grey-blue. Excellent for secondary sections, large content blocks, or as a lighter background to provide visual breathing room without losing sophistication.

accent

#6A7982: The darkest, most grounding shade. Use sparingly for call-to-action buttons, key icons, or important text elements that need to stand out with authority and depth.

background

#E0E4E7: A very light, almost off-white grey. Perfect for primary page backgrounds, large canvases, or as a neutral base that allows other colors to gently emerge.

text

#6A7982: For primary body text, ensuring excellent readability against lighter backgrounds. For headings, #8C99A4 works well, or use a near-black charcoal for maximal contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like #E0E4E7 with #B1BCC4.
  • Reserve #6A7982 for text on very light backgrounds to meet WCAG AA standards.
  • When using #8C99A4 as a background, pair with white or #E0E4E7 text for optimal readability.
  • Avoid placing #B1BCC4 text directly on #9AAAB5 backgrounds due to potentially low contrast.

Recommended combinations

High Contrast Depth

For clear hierarchy: #E0E4E7 as background, #6A7982 for primary text/CTAs, #8C99A4 for headings/secondary elements.

#E0E4E7 · #6A7982 · #8C99A4

Serene Gradient

Ideal for subtle backgrounds, gradient overlays, or illustrating depth with adjacent UI components.

#B1BCC4 · #9AAAB5 · #E0E4E7

Muted Professional

Use #8C99A4 for primary branding, #B1BCC4 for supporting elements, and #6A7982 for crucial accents or strong typography.

#8C99A4 · #B1BCC4 · #6A7982

CSS variables

:root {
  --misty-mountain-path-1: #8C99A4;
  --misty-mountain-path-2: #B1BCC4;
  --misty-mountain-path-3: #E0E4E7;
  --misty-mountain-path-4: #6A7982;
  --misty-mountain-path-5: #9AAAB5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-path": {
        1: "#8C99A4",
        2: "#B1BCC4",
        3: "#E0E4E7",
        4: "#6A7982",
        5: "#9AAAB5",
      }
    }
  }
}

Related searches

calm grey paletteserene neutral colorsmisty landscape color schemeprofessional muted tonescool grey ui colors

Palette colors

Hex values

Color 1#8C99A4
·
Color 2#B1BCC4
·
Color 3#E0E4E7
·
Color 4#6A7982
·
Color 5#9AAAB5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
1.5:1Fail
1.2:1Fail
2
1.5:1Fail
1.5:1Fail
2.3:1Fail
1.2:1Fail
3
2.3:1Fail
1.5:1Fail
3.5:1AA18
1.9:1Fail
4
1.5:1Fail
2.3:1Fail
3.5:1AA18
1.9:1Fail
5
1.2:1Fail
1.2:1Fail
1.9:1Fail
1.9:1Fail

Similar palettes

More like Misty Mountain Path

View all neutral
Meditative Rock Pool
Whispering Willow Trail
Zen Garden Stillness
Calm Ocean Sands
Cloud Burst Horizon
Cloud Kissed Peak