Back to palettes

Palette

Misty Mountain

Cool greys and muted blues portray the majestic, serene silhouette of mountains veiled in gentle mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#708090#A9A9A9#B0C4DE#C6D2E0#D8DDE4

Palette guide

How to use Misty Mountain

Overview

The Misty Mountain palette evokes the majestic and serene silhouette of mountains veiled in gentle mist, utilizing cool greys and muted blues. With foundational shades like #708090 (Slate Gray) and #A9A9A9 (Dark Gray), alongside the soft blue of #B0C4DE (Light Steel Blue), this collection offers a sophisticated and calming aesthetic. Designers and developers can use this palette to create professional, yet tranquil, interfaces and branding. The subtle progression of tones from dark to light, including #C6D2E0 and #D8DDE4, allows for depth and visual hierarchy without sacrificing the overall serene mood.

Best used for

  • Corporate and financial services branding
  • Luxury product websites and packaging
  • Educational institution design
  • Weather and environmental applications
  • Travel and hospitality branding
  • Modern architectural visualizations

Suggested color roles

primary

Use #708090 as a strong, professional base for headings, primary navigation, or calls to action. It provides clear definition.

secondary

Employ #A9A9A9 for supportive text, subheadings, or as a background for sections that need a softer, yet substantial, presence.

accent

Apply #B0C4DE as a soft, expanding highlight for interactive elements, data visualization, or to introduce a subtle touch of color.

background

Utilize #D8DDE4 as a clean, cool base for main content areas, providing a sense of spaciousness. #C6D2E0 can serve as a slightly darker secondary background.

text

For optimal readability on light backgrounds, use #708090 or a deep charcoal. For darker elements, white or a very light grey is recommended.

Accessibility notes

  • Ensure sufficient contrast for text on #D8DDE4 and #C6D2E0 backgrounds, especially for smaller font sizes.
  • Test the readability of #A9A9A9 text on backgrounds like #C6D2E0 to meet WCAG AA standards.
  • Prioritize #708090 for critical text on light backgrounds to ensure maximum legibility.
  • Provide clear focus indicators for interactive elements to ensure visibility across similar cool tones.

Recommended combinations

Professional Blend

Creates a balanced, professional look with a strong primary, light background, and a soft, inviting accent.

#708090 · #D8DDE4 · #B0C4DE

Serene Interface

Ideal for user interfaces, providing a gentle hierarchy with a light background, supportive mid-tone, and clear dark text.

#C6D2E0 · #A9A9A9 · #708090

Muted Elegance

Perfect for a soft, elegant aesthetic, using the blue as a primary element, the lightest tone for background, and dark for contrast.

#B0C4DE · #D8DDE4 · #708090

CSS variables

:root {
  --misty-mountain-1: #708090;
  --misty-mountain-2: #A9A9A9;
  --misty-mountain-3: #B0C4DE;
  --misty-mountain-4: #C6D2E0;
  --misty-mountain-5: #D8DDE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#B0C4DE",
        4: "#C6D2E0",
        5: "#D8DDE4",
      }
    }
  }
}

Related searches

cool grey blue paletteserene mountain colorsmuted professional schemecorporate cool tonestranquil design

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#B0C4DE
·
Color 4#C6D2E0
·
Color 5#D8DDE4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.3:1Fail
2.6:1Fail
3:1Fail
2
1.7:1Fail
1.3:1Fail
1.5:1Fail
1.7:1Fail
3
2.3:1Fail
1.3:1Fail
1.2:1Fail
1.3:1Fail
4
2.6:1Fail
1.5:1Fail
1.2:1Fail
1.1:1Fail
5
3:1Fail
1.7:1Fail
1.3:1Fail
1.1:1Fail

Similar palettes

More like Misty Mountain

View all cool
Alpine Mist
Misty Mountain Dawn
Misty Mountain Vista
Mountain Fog Blanket
Cloud Capped Peaks
Cloud Forest Haze