Back to palettes

Palette

Misty Morning Haze

Soft, muted tones evoking the quiet beauty of a cool, misty morning as the fog gently lifts.

NeutralCalm5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Morning Haze 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 Morning Haze.

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

Data visualization

#D8DDE1#BFC6CC#A7B0B6#8E989F#758188

Palette guide

How to use Misty Morning Haze

Overview

The Misty Morning Haze palette offers a refined and cohesive collection of soft, muted greys, embodying the quiet beauty of a cool, fog-laden morning. With hues ranging from the light #D8DDE1 to the grounding #758188, and including the versatile #A7B0B6, this palette is ideal for designers and developers seeking a calm, professional, and timeless aesthetic. It provides an excellent foundation for clean user interfaces, corporate branding, or digital experiences that prioritize clarity, readability, and a soothing visual presence. The subtle cool undertones ensure sophistication and adaptability across various applications.

Best used for

  • Minimalist web design
  • Corporate and professional branding
  • SaaS application interfaces
  • Editorial and publishing layouts
  • Modern architectural presentations
  • Environmental awareness campaigns

Suggested color roles

primary

#758188 - A deep, muted cool grey, ideal for prominent headings, call-to-action buttons, or main navigation, providing a strong, stable anchor.

secondary

#8E989F - A versatile medium-dark grey, suitable for subheadings, secondary interactive elements, or graphic accents, offering gentle contrast.

accent

#A7B0B6 - A balanced, soft grey that can highlight interactive states, small icons, or subtle graphic details, adding a touch of understated elegance.

background

#D8DDE1 - A very light, almost white cool grey, excellent for clean main backgrounds, large content areas, or modal overlays, ensuring an open and airy feel.

text

Dark charcoal or black - A dark grey such as #333333 or pure black should be used for primary body text to ensure maximum readability against lighter backgrounds.

Accessibility notes

  • Ensure #758188 or a dark custom text color has sufficient contrast with #D8DDE1 or #BFC6CC for text readability.
  • Avoid using #A7B0B6 or #BFC6CC for small text on backgrounds of similar lightness to prevent readability issues.
  • Use clear visual indicators (e.g., underlines, icons) in addition to color for interactive states, especially between similar shades.
  • Monochrome palettes are generally accessible, but always verify contrast ratios for critical text.

Recommended combinations

Soft Layers

Ideal for creating subtle, layered backgrounds, gentle gradients, or large content sections with an expansive and calm feel.

#D8DDE1 · #BFC6CC · #A7B0B6

Clear Read

Excellent for strong typographic hierarchy: darkest for headings, mid-tone for subheadings, and lightest for background.

#758188 · #8E989F · #D8DDE1

Muted UI

Perfect for standard UI components: light background, dark primary text/buttons, and a mid-grey for secondary information or borders.

#D8DDE1 · #758188 · #A7B0B6

CSS variables

:root {
  --misty-morning-haze-1: #D8DDE1;
  --misty-morning-haze-2: #BFC6CC;
  --misty-morning-haze-3: #A7B0B6;
  --misty-morning-haze-4: #8E989F;
  --misty-morning-haze-5: #758188;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-morning-haze": {
        1: "#D8DDE1",
        2: "#BFC6CC",
        3: "#A7B0B6",
        4: "#8E989F",
        5: "#758188",
      }
    }
  }
}

Related searches

muted grey color palettecalm professional greysoft morning haze colorsneutral web design schemetimeless cool grey UI

Palette colors

Hex values

Color 1#D8DDE1
·
Color 2#BFC6CC
·
Color 3#A7B0B6
·
Color 4#8E989F
·
Color 5#758188
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
2.1:1Fail
2.9:1Fail
2
1.3:1Fail
1.3:1Fail
1.7:1Fail
2.3:1Fail
3
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.8:1Fail
4
2.1:1Fail
1.7:1Fail
1.3:1Fail
1.4:1Fail
5
2.9:1Fail
2.3:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Misty Morning Haze

View all Neutral
Coastal Fog Morning
Whispering Meadow Mist
Clouded Moon Reflection
Foggy Pine Retreat
Pebble Shore
Pebble Shore Drift