Palette

Misty Mountain Peaks

Cool, muted blues and greys capturing the serene grandeur of misty mountain ranges at dawn.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A636E#69838E#8BA0AA#ACBCC4#CED8DD

Palette guide

How to use Misty Mountain Peaks

Overview

The Misty Mountain Peaks palette evokes a sense of calm and natural grandeur, perfect for designs seeking a serene yet sophisticated aesthetic. This cool-toned collection features muted blues and greys, ranging from the deep #4A636E to the soft, airy #CED8DD. Ideal for evoking a sense of tranquility and professionalism, these colors work harmoniously to create depth and subtle contrast. Designers and developers can leverage shades like #69838E and #8BA0AA to build a cohesive visual narrative across user interfaces, branding, or environmental graphics. Its understated elegance makes it versatile for conveying stability and clarity without being overtly bold.

Best used for

Nature-inspired brand identity and websites
Wellness, spa, or mindfulness app interfaces
Corporate and professional services branding
Architectural and interior design presentations
Eco-friendly product packaging
Editorial layouts requiring a calming backdrop

Suggested color roles

primary

#4A636E serves as a strong, grounding primary, excellent for main headers, navigation bars, or foundational brand elements, conveying stability.

secondary

#69838E offers a versatile secondary color, suitable for subheadings, active states, or larger content blocks, providing a balanced visual weight.

accent

#ACBCC4 can be used subtly as an accent for highlights, hover states, or delicate graphic elements, offering a gentle lift against darker tones.

background

#CED8DD provides a clean, airy background, perfect for main content areas or minimalist layouts, ensuring high readability.

text

For dark text on light backgrounds, use #4A636E for headings, or a near-black like #333333 for body copy. For light text on dark backgrounds, #CED8DD works well.

Accessibility notes

Ensure sufficient contrast between #4A636E text and #CED8DD backgrounds to meet WCAG AA standards for readability.
Avoid using #8BA0AA or #ACBCC4 for small text on #CED8DD backgrounds as contrast may be insufficient.
When pairing #69838E with #4A636E, use the lighter shade for larger text or design elements where contrast is less critical.
Always test color combinations, especially text over images, to guarantee legibility across all devices.

Recommended combinations

Deep Serenity

Ideal for a sophisticated, deep-toned header with clear, light body text and subtle accents in a corporate or luxury brand setting.

#4A636E · #69838E · #CED8DD

Gentle Gradient

Perfect for creating subtle visual hierarchies or soft, atmospheric gradients in UI elements, evoking a smooth transition.

#69838E · #8BA0AA · #ACBCC4

Light & Airy

Excellent for a clean, minimalist design with a very light background, using the darker shades for impactful headings and calls to action.

#CED8DD · #ACBCC4 · #4A636E

CSS variables

:root {
  --misty-mountain-peaks-1: #4A636E;
  --misty-mountain-peaks-2: #69838E;
  --misty-mountain-peaks-3: #8BA0AA;
  --misty-mountain-peaks-4: #ACBCC4;
  --misty-mountain-peaks-5: #CED8DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-peaks": {
        1: "#4A636E",
        2: "#69838E",
        3: "#8BA0AA",
        4: "#ACBCC4",
        5: "#CED8DD",
      }
    }
  }
}

Hex values

Color 1#4A636E

Color 2#69838E

Color 3#8BA0AA

Color 4#ACBCC4

Color 5#CED8DD

Accessibility

Contrast checker

1.6:1Fail

2.3:1Fail

3.3:1AA18

4.4:1AA18

1.6:1Fail

1.5:1Fail

2.1:1Fail

2.8:1Fail

2.3:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail

3.3:1AA18

2.1:1Fail

1.4:1Fail

1.3:1Fail

4.4:1AA18

2.8:1Fail

1.9:1Fail

1.3:1Fail

Similar palettes

More like Misty Mountain Peaks

Serene Waterfall Mist

Arctic Glacier Melt