Palette

Misty Mountain Vista

Cool greys and muted blues reflecting the vast, quiet grandeur of mist-shrouded mountain peaks.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#778899#B0C4DE#D3D3D3#A9A9A9#2F4F4F

Palette guide

How to use Misty Mountain Vista

Overview

The Misty Mountain Vista palette captures the serene, expansive feel of mist-shrouded peaks through a blend of cool greys and muted blues. Key colors include the deep, anchoring #2F4F4F (Dark Slate Gray), the calming #778899 (Light Slate Gray), and the ethereal #B0C4DE (Light Steel Blue). This palette offers a sophisticated yet tranquil aesthetic, ideal for projects aiming for a sense of peace, vastness, and natural beauty. Its versatility allows for both subtle depth and gentle contrast, making it suitable for a wide range of design applications from digital interfaces to physical spaces.

Best used for

Travel and tourism websites or brochures
Environmental and nature-focused branding
Wellness and meditation applications
Photography portfolios and galleries
Luxury home decor and interior design
Serene digital interfaces and dashboards

Suggested color roles

primary

Use #2F4F4F as a strong, grounding color for main headings, footers, or dominant brand elements. It provides significant visual weight.

secondary

Employ #778899 for supportive content, subheadings, or as a background for sections that need a calm, expansive feel.

accent

Apply #B0C4DE as a soft, ethereal highlight for interactive elements, illustrations, or subtle graphical accents.

background

Utilize #D3D3D3 as a light, airy canvas for main content areas, allowing other colors to recede or stand out. #A9A9A9 can be used for secondary backgrounds.

text

For optimal readability, use #2F4F4F or a dark charcoal on lighter backgrounds like #D3D3D3 or #B0C4DE. For darker backgrounds, white or a very light grey is recommended.

Accessibility notes

Ensure sufficient contrast when pairing #D3D3D3 or #B0C4DE with lighter text; use dark text for optimal readability.
Test text readability of #A9A9A9 on backgrounds like #D3D3D3 to meet WCAG AA standards.
Use #2F4F4F for primary text on light backgrounds for maximum legibility.
Provide clear visual cues for interactive elements, ensuring they are distinguishable across the muted palette.

Recommended combinations

Deep Vista

Creates a strong contrast with deep primary elements against a light, airy background, highlighted by a soft blue accent.

#2F4F4F · #D3D3D3 · #B0C4DE

Muted Harmony

Ideal for a gentle, cohesive design. Great for layered backgrounds or subtle transitions in UI elements.

#778899 · #A9A9A9 · #B0C4DE

Cool Landscape

Provides a balanced, natural feel. Use #2F4F4F for text, #778899 for subheadings, and #D3D3D3 for the main background.

#2F4F4F · #778899 · #D3D3D3

CSS variables

:root {
  --misty-mountain-vista-1: #778899;
  --misty-mountain-vista-2: #B0C4DE;
  --misty-mountain-vista-3: #D3D3D3;
  --misty-mountain-vista-4: #A9A9A9;
  --misty-mountain-vista-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-vista": {
        1: "#778899",
        2: "#B0C4DE",
        3: "#D3D3D3",
        4: "#A9A9A9",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#778899

Color 2#B0C4DE

Color 3#D3D3D3

Color 4#A9A9A9

Color 5#2F4F4F

Accessibility

Contrast checker

2:1Fail

2.4:1Fail

1.5:1Fail

2.5:1Fail

2:1Fail

1.2:1Fail

1.3:1Fail

5:1AA

2.4:1Fail

1.2:1Fail

1.6:1Fail

6:1AA

1.5:1Fail

1.3:1Fail

1.6:1Fail

3.8:1AA18

2.5:1Fail

5:1AA

6:1AA

3.8:1AA18

Similar palettes

More like Misty Mountain Vista