Palette

Misty Mountain Peak

Cool grays and blues that capture the serene, often mysterious, atmosphere 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 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

#4C575D#707B84#9DAAB2#CCD7DC#EAEFF2

Palette guide

How to use Misty Mountain Peak

Overview

The Misty Mountain Peak color palette evokes the tranquil and mysterious atmosphere of mist-shrouded landscapes. Dominated by cool grays, this collection offers a sophisticated and serene foundation for any design. From the deep, grounding #4C575D to the airy, almost ethereal #EAEFF2, designers can create depth and subtle transitions. The mid-tones like #707B84 and #9DAAB2 provide excellent versatility, while #CCD7DC offers a soft, inviting base. This palette is ideal for projects aiming for a sense of calm, professionalism, and understated elegance, guiding users through a visually soothing experience reminiscent of nature's quiet grandeur.

Best used for

Nature-inspired branding (eco-friendly, outdoor gear)
Minimalist website designs
Professional corporate interfaces
Serene interior design concepts
Photography portfolio backdrops
High-end product packaging

Suggested color roles

primary

#4C575D - Use for strong headings, primary buttons, or foundational elements requiring weight and gravitas.

secondary

#707B84 - Ideal for subheadings, secondary calls-to-action, or large content blocks to maintain readability without overwhelming.

accent

#9DAAB2 - Perfect for subtle highlights, interactive states, or graphical elements that need to stand out gently.

background

#EAEFF2 - Provides a clean, crisp, and almost white canvas, ensuring excellent readability for darker text.

text

#4C575D - Recommended for body text and paragraphs to ensure strong contrast against lighter backgrounds like #EAEFF2 or #CCD7DC.

Accessibility notes

Ensure sufficient contrast when pairing lighter grays like #CCD7DC and #EAEFF2 for text on background.
Use a tool to check WCAG compliance for text-to-background contrast, especially for #9DAAB2 on #EAEFF2.
Reserve the darkest shades like #4C575D for essential text elements to maximize readability.
Consider using a slightly darker text color than #4C575D, such as a true black, if contrast is still insufficient on some lighter palette colors for accessibility.

Recommended combinations

Deep Mist

Excellent for high-contrast, professional layouts where #4C575D anchors the design, #707B84 adds depth, and #EAEFF2 provides a clean background.

#4C575D · #707B84 · #EAEFF2

Soft Horizon

Creates a harmonious, low-contrast design, perfect for subtle gradients, background elements, or card interfaces needing a gentle touch.

#707B84 · #9DAAB2 · #CCD7DC

Peak Ascent

A balanced combination for web interfaces, where #4C575D is for text/icons, #EAEFF2 for backgrounds, and #9DAAB2 for interactive elements or secondary information.

#4C575D · #9DAAB2 · #EAEFF2

CSS variables

:root {
  --misty-mountain-peak-1: #4C575D;
  --misty-mountain-peak-2: #707B84;
  --misty-mountain-peak-3: #9DAAB2;
  --misty-mountain-peak-4: #CCD7DC;
  --misty-mountain-peak-5: #EAEFF2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-peak": {
        1: "#4C575D",
        2: "#707B84",
        3: "#9DAAB2",
        4: "#CCD7DC",
        5: "#EAEFF2",
      }
    }
  }
}

Hex values

Color 1#4C575D

Color 2#707B84

Color 3#9DAAB2

Color 4#CCD7DC

Color 5#EAEFF2

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

5.1:1AA

6.4:1AA

1.7:1Fail

1.8:1Fail

2.9:1Fail

3.7:1AA18

3.1:1AA18

1.8:1Fail

1.6:1Fail

2.1:1Fail

5.1:1AA

2.9:1Fail

1.6:1Fail

1.3:1Fail

6.4:1AA

3.7:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Misty Mountain Peak