Back to palettes

Palette

Misty Mountain Trail

A tranquil blend of cool greys and blues, evoking the ethereal atmosphere of a winding mountain path shrouded in mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F6C7E#8C99A9#B9C6D3#DCE2E7#3C4A5A

Palette guide

How to use Misty Mountain Trail

Overview

The Misty Mountain Trail palette offers a serene and sophisticated blend of cool grey-blues, perfect for evoking a sense of calm and professionalism. With its core shades like the balanced #5F6C7E, the lighter #8C99A9, and the deep, grounding #3C4A5A, this collection is inspired by ethereal landscapes. The very light #DCE2E7 provides an excellent airy background, while #B9C6D3 serves as a versatile mid-tone. Designers can leverage this palette to create clean, modern interfaces, branding, or editorial content that conveys tranquility, stability, and a connection to nature. It's ideal for projects requiring a subtle yet impactful visual identity.

Best used for

  • Wellness and meditation apps or websites
  • Corporate branding and professional services
  • Nature-inspired product packaging
  • High-tech or software interfaces
  • Editorial design for travel or lifestyle magazines
  • Interior design visualization and mood boards

Suggested color roles

primary

#5F6C7E - A versatile mid-tone grey-blue, excellent for main content sections, primary buttons, or brand identity elements where a balanced yet distinct presence is desired.

secondary

#8C99A9 - A lighter, supportive shade perfect for secondary information, subtle navigation elements, or as a complementary background layer to add depth without overwhelming.

accent

#B9C6D3 - A soft, light grey-blue that can be used for subtle highlights, interactive states, or decorative elements that need to stand out gently against darker tones.

background

#DCE2E7 - An exceptionally light and airy tone, ideal for main page backgrounds, large content areas, or as a canvas that allows other palette colors to truly shine.

text

#3C4A5A - The darkest shade, providing optimal contrast and readability for body text, headings, and crucial information, ensuring legibility across all applications.

Accessibility notes

  • Ensure sufficient contrast when using #B9C6D3 or #DCE2E7 for text on lighter backgrounds; consider #3C4A5A or #5F6C7E for better readability.
  • Text in #3C4A5A on a #DCE2E7 background provides excellent contrast for WCAG AA compliance.
  • Use #5F6C7E for interactive elements like buttons to ensure they are distinct from the #DCE2E7 background.
  • Avoid placing light text such as #B9C6D3 on #8C99A9 without careful contrast checking; darker text from the palette is generally safer.

Recommended combinations

Misty Morning

Ideal for clean web pages: #DCE2E7 as background, #5F6C7E for headings/primary elements, and #3C4A5A for body text.

#DCE2E7 · #5F6C7E · #3C4A5A

Serene Horizon

Use #8C99A9 for background, #B9C6D3 for secondary elements or highlights, and #3C4A5A for clear, contrasting text.

#8C99A9 · #B9C6D3 · #3C4A5A

Deep Forest

For a dramatic, sophisticated look: #3C4A5A as a deep background, #B9C6D3 for prominent text, and #8C99A9 for subtle accents.

#3C4A5A · #B9C6D3 · #8C99A9

CSS variables

:root {
  --misty-mountain-trail-2-1: #5F6C7E;
  --misty-mountain-trail-2-2: #8C99A9;
  --misty-mountain-trail-2-3: #B9C6D3;
  --misty-mountain-trail-2-4: #DCE2E7;
  --misty-mountain-trail-2-5: #3C4A5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-trail-2": {
        1: "#5F6C7E",
        2: "#8C99A9",
        3: "#B9C6D3",
        4: "#DCE2E7",
        5: "#3C4A5A",
      }
    }
  }
}

Related searches

cool grey blue color paletteserene professional colorsnature inspired ui ux palettecalm brand colorsmisty blue grey hex codes

Palette colors

Hex values

Color 1#5F6C7E
·
Color 2#8C99A9
·
Color 3#B9C6D3
·
Color 4#DCE2E7
·
Color 5#3C4A5A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.1:1AA18
4.1:1AA18
1.7:1Fail
2
1.8:1Fail
1.7:1Fail
2.2:1Fail
3.1:1AA18
3
3.1:1AA18
1.7:1Fail
1.3:1Fail
5.2:1AA
4
4.1:1AA18
2.2:1Fail
1.3:1Fail
6.9:1AA
5
1.7:1Fail
3.1:1AA18
5.2:1AA
6.9:1AA

Similar palettes

More like Misty Mountain Trail

View all cool
Alpine Mist
Ice Cave Glow
Weathered Beach Stone
Agate Grotto
Arctic Lake Glass
Arctic Whisper Glade