Palette

Misty Moorland Dawn

Cool greys and soft blues that evoke the silent, ethereal beauty of a misty moor at dawn.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3E4A5C#6A7B8E#97A9BB#C4D7DD#ECF4F6

Palette guide

How to use Misty Moorland Dawn

Overview

The Misty Moorland Dawn palette (version 2) captures the silent, ethereal beauty of a misty moor at dawn, offering a cool collection of greys and soft blues. From the deep anchor '#3E4A5C' to the light and expansive '#ECF4F6', and including the harmonious '#6A7B8E', '#97A9BB', and '#C4D7DD', this palette is perfect for creating tranquil and sophisticated digital environments. Designers and developers will find these colors ideal for projects requiring a sense of calm, professionalism, and understated elegance. The balanced cool tones ensure a cohesive and visually pleasing aesthetic, making it excellent for corporate branding, tech companies, or any platform seeking a refreshing yet grounded feel.

Best used for

Corporate and business websites
Tech and software company branding
Minimalist UI/UX design
Educational platforms and e-learning
Travel and adventure-themed content
Healthcare and wellness service sites

Suggested color roles

primary

Use '#3E4A5C' as a deep, strong primary color for headers, key navigation, or impactful calls to action.

secondary

Employ '#6A7B8E' for supporting content, subheadings, or secondary buttons, adding rich depth.

accent

Apply '#97A9BB' for subtle highlights, interactive elements, or to introduce a lighter touch.

background

Utilize '#ECF4F6' as the main background for a clean, airy, and expansive canvas.

text

For optimal readability, use '#3E4A5C' for primary body text, ensuring excellent contrast on light backgrounds.

Accessibility notes

Ensure '#3E4A5C' text on '#ECF4F6' background provides strong contrast for readability.
Avoid using '#C4D7DD' or '#97A9BB' for small, critical text due to potential low contrast.
Verify contrast ratios for all interactive elements and text sizes against WCAG guidelines.
Provide clear visual indicators for focus and hover states to enhance user experience.

Recommended combinations

Deep Moor

Creates a strong, cohesive foundation, ideal for hero sections, footers, or prominent features.

#3E4A5C · #6A7B8E · #97A9BB

Dawn Light

Perfect for light, airy layouts, background elements, or sections needing a soft, ethereal touch.

#ECF4F6 · #C4D7DD · #97A9BB

Cool Harmony

Offers a balanced yet refreshing combination, suitable for content blocks, infographics, or layered UI.

#6A7B8E · #C4D7DD · #3E4A5C

CSS variables

:root {
  --misty-moorland-dawn-2-1: #3E4A5C;
  --misty-moorland-dawn-2-2: #6A7B8E;
  --misty-moorland-dawn-2-3: #97A9BB;
  --misty-moorland-dawn-2-4: #C4D7DD;
  --misty-moorland-dawn-2-5: #ECF4F6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-moorland-dawn-2": {
        1: "#3E4A5C",
        2: "#6A7B8E",
        3: "#97A9BB",
        4: "#C4D7DD",
        5: "#ECF4F6",
      }
    }
  }
}

Hex values

Color 1#3E4A5C

Color 2#6A7B8E

Color 3#97A9BB

Color 4#C4D7DD

Color 5#ECF4F6

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

6:1AA

8.1:1AAA

2.1:1Fail

1.8:1Fail

2.9:1Fail

3.9:1AA18

3.7:1AA18

1.8:1Fail

1.6:1Fail

2.2:1Fail

6:1AA

2.9:1Fail

1.6:1Fail

1.3:1Fail

8.1:1AAA

3.9:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Misty Moorland Dawn