Back to palettes

Palette

Misty Mountain Trail

Soft, muted greys and blues capture the serene ambiance of a misty mountain trail 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

#E8EBF0#B3BDC9#7A8A9B#4D5D6D#2D3E4C

Palette guide

How to use Misty Mountain Trail

Overview

The Misty Mountain Trail palette offers a serene collection of cool, muted greys and blues, perfect for creating a calm and sophisticated digital presence. With shades ranging from the airy #E8EBF0 to the deep #2D3E4C, this palette evokes the tranquil ambiance of a foggy landscape. Designers will find #B3BDC9 and #7A8A9B particularly versatile for UI elements, while #4D5D6D provides excellent depth. This guide provides practical applications for web and app development, ensuring a harmonious and professional aesthetic that resonates with users seeking understated elegance. It's ideal for projects requiring a sense of stability and peace.

Best used for

  • Corporate websites and professional portfolios
  • Wellness and meditation apps
  • Nature-inspired branding and photography sites
  • Minimalist UI design for productivity tools
  • Architectural and interior design presentations
  • High-end editorial layouts

Suggested color roles

primary

#4D5D6D. A grounding, sophisticated base for main sections, headers, or prominent UI components, offering a sense of depth and professionalism.

secondary

#7A8A9B. Excellent for supporting elements, subheadings, or active states, providing a clear contrast to the primary while maintaining the palette's calm mood.

accent

#B3BDC9. Use sparingly for subtle highlights, interactive elements like buttons, or to draw attention to key information without being overly bold.

background

#E8EBF0. A light, airy canvas that provides excellent readability and a soft, expansive feel, ideal for primary page backgrounds or large content blocks.

text

#2D3E4C. The darkest shade ensures strong contrast and readability for body text, headings, and important labels against lighter backgrounds like #E8EBF0 or #B3BDC9.

Accessibility notes

  • Ensure #2D3E4C text on #E8EBF0 background meets WCAG AAA contrast for optimal readability.
  • Avoid using #B3BDC9 for small text on #7A8A9B backgrounds due to insufficient contrast.
  • For interactive elements, provide clear focus states using a distinct hue or a darker shade like #4D5D6D.
  • Test all text and icon color combinations with a contrast checker to guarantee accessibility for all users.

Recommended combinations

Deep Serenity

Ideal for a clean, professional website with light backgrounds and strong, readable dark text and subtle dark elements.

#E8EBF0 · #4D5D6D · #2D3E4C

Mountain Mist

Excellent for layered UI elements, where different shades of grey-blue define hierarchy and depth without harsh contrasts.

#B3BDC9 · #7A8A9B · #4D5D6D

Subtle Accent

Perfect for a minimalist design where #B3BDC9 provides a gentle accent against a high-contrast dark text on a very light background.

#E8EBF0 · #2D3E4C · #B3BDC9

CSS variables

:root {
  --misty-mountain-trail-3-1: #E8EBF0;
  --misty-mountain-trail-3-2: #B3BDC9;
  --misty-mountain-trail-3-3: #7A8A9B;
  --misty-mountain-trail-3-4: #4D5D6D;
  --misty-mountain-trail-3-5: #2D3E4C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-trail-3": {
        1: "#E8EBF0",
        2: "#B3BDC9",
        3: "#7A8A9B",
        4: "#4D5D6D",
        5: "#2D3E4C",
      }
    }
  }
}

Related searches

calm grey blue color schemeserene website palettemuted cool tones UIprofessional neutral colorsfoggy mountain web design

Palette colors

Hex values

Color 1#E8EBF0
·
Color 2#B3BDC9
·
Color 3#7A8A9B
·
Color 4#4D5D6D
·
Color 5#2D3E4C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3:1Fail
5.7:1AA
9.2:1AAA
2
1.6:1Fail
1.9:1Fail
3.6:1AA18
5.8:1AA
3
3:1Fail
1.9:1Fail
1.9:1Fail
3.1:1AA18
4
5.7:1AA
3.6:1AA18
1.9:1Fail
1.6:1Fail
5
9.2:1AAA
5.8:1AA
3.1:1AA18
1.6:1Fail

Similar palettes

More like Misty Mountain Trail

View all neutral
Coastal Fog Drift
Highlands Fog Hike
Misty Peaks Veil
Cloud Forest Mist
Cloud Kissed Peak
Coastal Dune Haze