Palette

Misty Mountain Peak

Captures the serene grandeur of majestic mountain peaks shrouded in a soft, ethereal mist.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#778899#A9A9A9#B0C4DE#6A808C#D3D3D3

Palette guide

How to use Misty Mountain Peak

Overview

The Misty Mountain Peak palette evokes a sense of serene grandeur, drawing inspiration from majestic landscapes shrouded in ethereal mist. This cool-toned collection features a grounding Slate Gray (#778899), a sophisticated Dark Gray (#A9A9A9), the calming Light Steel Blue (#B0C4DE), a versatile Cadet Gray (#6A808C), and a crisp Light Gray (#D3D3D3). Ideal for designs seeking tranquility and understated elegance, this palette offers a harmonious blend suitable for both digital interfaces and physical spaces. Its muted yet profound visual experience is perfect for creating calm and professional aesthetics, providing a sophisticated foundation for any project.

Best used for

Luxury spa and wellness branding
Nature photography portfolios
Minimalist UI/UX design for apps
Corporate websites seeking a serene feel
Interior design concepts for tranquil spaces
Art and design portfolios

Suggested color roles

primary

Use #778899 (Slate Gray) as a dominant, grounding color for large sections or main branding elements, providing a strong yet calm anchor.

secondary

Apply #6A808C (Cadet Gray) for supportive elements like secondary navigation, subheadings, or background panels, offering depth and harmony.

accent

Incorporate #A9A9A9 (Dark Gray) sparingly for subtle highlights, icons, or interactive states, adding sophistication without overwhelming.

background

Utilize #D3D3D3 (Light Gray) for clean, airy backgrounds, ensuring spaciousness and allowing other colors to subtly stand out.

text

Employ a very dark charcoal or black for body text on light backgrounds like #D3D3D3, or use #778899 for headings on lighter shades to ensure excellent readability.

Accessibility notes

Ensure sufficient contrast between #D3D3D3 background and any text, especially smaller fonts, to meet WCAG AA standards.
Avoid using #A9A9A9 (Dark Gray) and #778899 (Slate Gray) for text on similar mid-tone backgrounds to prevent readability issues.
Test color pairings like #B0C4DE on #D3D3D3 for interactive elements to guarantee they are discernible to all users.
For critical information, use higher contrast combinations, perhaps pairing a very dark text against the lightest palette colors.

Recommended combinations

Serene UI Base

Ideal for clean user interfaces, #D3D3D3 as background, #6A808C for text/icons, and #B0C4DE for interactive elements like buttons.

#D3D3D3 · #6A808C · #B0C4DE

Deep Mountain Depth

Perfect for branding or hero sections, #778899 as primary, #A9A9A9 for secondary details, and #B0C4DE for a subtle, ethereal highlight.

#778899 · #A9A9A9 · #B0C4DE

Misty Landscape

Great for visual storytelling, #B0C4DE for a soft background, #D3D3D3 for foreground elements, and #6A808C for impactful details.

#B0C4DE · #D3D3D3 · #6A808C

CSS variables

:root {
  --misty-mountain-peak-2-1: #778899;
  --misty-mountain-peak-2-2: #A9A9A9;
  --misty-mountain-peak-2-3: #B0C4DE;
  --misty-mountain-peak-2-4: #6A808C;
  --misty-mountain-peak-2-5: #D3D3D3;
}

Tailwind config

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

Hex values

Color 1#778899

Color 2#A9A9A9

Color 3#B0C4DE

Color 4#6A808C

Color 5#D3D3D3

Accessibility

Contrast checker

1.5:1Fail

2:1Fail

1.1:1Fail

2.4:1Fail

1.5:1Fail

1.3:1Fail

1.8:1Fail

1.6:1Fail

2:1Fail

1.3:1Fail

2.3:1Fail

1.2:1Fail

1.1:1Fail

1.8:1Fail

2.3:1Fail

2.8:1Fail

2.4:1Fail

1.6:1Fail

1.2:1Fail

2.8:1Fail

Similar palettes

More like Misty Mountain Peak