Palette

Misty Mountain Trail

Cool greys and subtle blues evoke the quiet, foggy grandeur of mountains at dawn.

neutralcalm5 colors

More neutral 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

#4A4A5A#6B6B7B#8E8E9E#B2B2C2#D4D4E4

Palette guide

How to use Misty Mountain Trail

Overview

The Misty Mountain Trail palette offers a sophisticated range of cool greys with subtle blue undertones, perfect for evoking a sense of rugged calm and natural grandeur. Featuring shades like deep slate grey #4A4A5A, versatile mid-tone #6B6B7B, and soft, ethereal light grey #D4D4E4, this collection provides excellent depth and versatility. Designers and developers can leverage these tones to create interfaces or branding that feel grounded yet expansive, reflecting the quiet strength of mountainous landscapes. This palette is ideal for projects requiring a mature, understated aesthetic with a touch of natural elegance.

Best used for

Outdoor adventure and gear branding
Minimalist web design and UI
Corporate and professional services
Luxury product packaging
Photography and art portfolios
Environmental non-profit organizations

Suggested color roles

primary

Use #4A4A5A as a strong, grounding base for headers, primary buttons, or dominant graphical elements. It provides excellent depth.

secondary

Employ #6B6B7B for supportive content, secondary navigation, or as a background for sections requiring slightly less intensity than the primary.

accent

Apply #8E8E9E for subtle highlights, interactive states, or to add texture without overpowering the main palette. It offers gentle contrast.

background

Utilize #D4D4E4 as a clean, airy background color for main content areas, allowing darker elements to pop. #B2B2C2 can also serve as a slightly darker background.

text

For optimal readability, use a dark grey like #4A4A5A or a standard charcoal on lighter backgrounds such as #D4D4E4 or #B2B2C2.

Accessibility notes

Ensure sufficient contrast when pairing #D4D4E4 with lighter text; consider using it only for backgrounds with dark text.
Test text readability of #B2B2C2 on backgrounds like #D4D4E4 to meet WCAG AA standards.
Use #4A4A5A for primary text on light backgrounds for maximum legibility.
Provide clear focus indicators for interactive elements, ensuring they stand out against similar grey tones.

Recommended combinations

Deep Horizon

Ideal for a strong brand presence with a light, spacious feel. #4A4A5A for text/elements, #D4D4E4 for background, #B2B2C2 for secondary accents.

#4A4A5A · #D4D4E4 · #B2B2C2

Misty Path

Creates a harmonious, understated design. Perfect for subtle gradients or layered content sections.

#6B6B7B · #8E8E9E · #B2B2C2

Rugged Contrast

Excellent for high-contrast text and elements on a very light background. #D4D4E4 as canvas, #4A4A5A for headlines, #6B6B7B for body text.

#D4D4E4 · #4A4A5A · #6B6B7B

CSS variables

:root {
  --misty-mountain-trail-1: #4A4A5A;
  --misty-mountain-trail-2: #6B6B7B;
  --misty-mountain-trail-3: #8E8E9E;
  --misty-mountain-trail-4: #B2B2C2;
  --misty-mountain-trail-5: #D4D4E4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-trail": {
        1: "#4A4A5A",
        2: "#6B6B7B",
        3: "#8E8E9E",
        4: "#B2B2C2",
        5: "#D4D4E4",
      }
    }
  }
}

Hex values

Color 1#4A4A5A

Color 2#6B6B7B

Color 3#8E8E9E

Color 4#B2B2C2

Color 5#D4D4E4

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4.2:1AA18

5.9:1AA

1.7:1Fail

1.6:1Fail

2.5:1Fail

3.6:1AA18

2.7:1Fail

1.6:1Fail

1.5:1Fail

2.2:1Fail

4.2:1AA18

2.5:1Fail

1.5:1Fail

1.4:1Fail

5.9:1AA

3.6:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Misty Mountain Trail

View all neutral

Misty Mountain Morning

Cloud Kissed Peak

Coastal Cliffs

Foggy Mountain Ascent

Highlands Fog Hike

Misty Alpine Peak