Back to palettes

Palette

Misty Mountain Dawn

The soft, cool light of dawn breaking over misty mountain peaks, serene and calming.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C6F7D#8DA2B3#B8C7D8#D8E1EA#4B5E6D

Palette guide

How to use Misty Mountain Dawn

Overview

The Misty Mountain Dawn palette perfectly captures the soft, cool light of dawn breaking over misty mountain peaks, creating a serene and calming atmosphere. With deep blues and greys like #5C6F7D and #4B5E6D, balanced by lighter, airy tones such as #D8E1EA, this palette is a powerful tool for designers and developers. It's ideal for projects that require a sense of professionalism, tranquility, and understated elegance, offering a versatile range of cool hues suitable for corporate, educational, or nature-inspired applications.

Best used for

  • Corporate and professional websites
  • Tech and software interfaces
  • Educational platforms
  • Travel and adventure branding
  • Masculine or sophisticated product design
  • Environmental awareness campaigns

Suggested color roles

primary

Utilize #5C6F7D as a main brand color or for prominent UI sections, conveying stability and depth.

secondary

Employ #8DA2B3 for supporting elements, subheadings, or secondary calls to action, offering a softer presence.

accent

Reserve #4B5E6D for stronger emphasis, interactive elements, or important text, providing clear focal points.

background

Choose #D8E1EA as a light, cool background, creating an open and clean canvas for content.

text

For optimal readability, use #4B5E6D for body text on light backgrounds like #D8E1EA, ensuring excellent contrast and elegance.

Accessibility notes

  • Ensure #4B5E6D text on #D8E1EA meets WCAG AAA contrast for body text, providing high readability.
  • Avoid using #B8C7D8 for small text or critical information on light backgrounds, as contrast may be insufficient.
  • Always test contrast ratios for interactive elements to ensure they are easily discernible for all users.
  • The darker colors, #5C6F7D and #4B5E6D, are best suited for text elements on lighter backgrounds in this palette.

Recommended combinations

Deep Horizon

Effective for creating strong, layered sections, elegant footers, or prominent headers with visual depth.

#4B5E6D · #5C6F7D · #8DA2B3

Misty Layers

Perfect for backgrounds, cards, or containers that require a soft, ethereal visual separation.

#D8E1EA · #B8C7D8 · #8DA2B3

Clean Accent

Combine the light background with a primary and a dark accent for impactful buttons or calls to action.

#D8E1EA · #5C6F7D · #4B5E6D

CSS variables

:root {
  --misty-mountain-dawn-1: #5C6F7D;
  --misty-mountain-dawn-2: #8DA2B3;
  --misty-mountain-dawn-3: #B8C7D8;
  --misty-mountain-dawn-4: #D8E1EA;
  --misty-mountain-dawn-5: #4B5E6D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-dawn": {
        1: "#5C6F7D",
        2: "#8DA2B3",
        3: "#B8C7D8",
        4: "#D8E1EA",
        5: "#4B5E6D",
      }
    }
  }
}

Related searches

serene mountain bluecool dawn palettecorporate grey bluepeaceful ui colorsdeep misty tones

Palette colors

Hex values

Color 1#5C6F7D
·
Color 2#8DA2B3
·
Color 3#B8C7D8
·
Color 4#D8E1EA
·
Color 5#4B5E6D
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3:1AA18
3.9:1AA18
1.3:1Fail
2
2:1Fail
1.5:1Fail
2:1Fail
2.5:1Fail
3
3:1AA18
1.5:1Fail
1.3:1Fail
3.9:1AA18
4
3.9:1AA18
2:1Fail
1.3:1Fail
5.1:1AA
5
1.3:1Fail
2.5:1Fail
3.9:1AA18
5.1:1AA

Similar palettes

More like Misty Mountain Dawn

View all cool
Alpine Mist
Misty Mountain
Cloud Capped Peaks
Cloud Peak Summit
Coastal Horizon Haze
Fjord Mist Ascent