Palette

Misty Morning Fog

Soft and atmospheric, like the subtle shift of colors as fog gently lifts at dawn.

NeutralCalm5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C6670#7E8A95#A0ACB6#C2CED8#E4EBF0

Palette guide

How to use Misty Morning Fog

Overview

The Misty Morning Fog palette captures the subtle, shifting beauty of fog lifting at dawn, presenting a nuanced range of cool, muted greys. With hues from the deep #5C6670 to the luminous #E4EBF0, and featuring the balanced #A0ACB6, this collection offers a serene and highly functional aesthetic. Designers and developers can utilize its gentle transitions for clean, modern interfaces, corporate branding, or digital experiences that prioritize understated elegance and readability. The palette's calming influence makes it excellent for creating a sophisticated and professional environment without harsh contrasts, promoting focus and clarity.

Best used for

Professional business websites
Financial services interfaces
Healthcare communication platforms
Modern art galleries online
Automotive brand visuals
Sustainable product design

Suggested color roles

primary

#5C6670 - A deep, cool charcoal grey, ideal for prominent headings, primary call-to-action buttons, or main navigation, providing a strong, serious anchor.

secondary

#7E8A95 - A versatile medium-dark grey, suitable for subheadings, secondary interactive elements, or graphic accents, offering clear yet gentle contrast.

accent

#A0ACB6 - A balanced, muted blue-grey that can highlight interactive states, small icons, or subtle graphic details, adding a touch of cool sophistication.

background

#E4EBF0 - 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 the lighter backgrounds.

Accessibility notes

Ensure #5C6670 or a dark custom text color has sufficient contrast with #E4EBF0 or #C2CED8 for text readability.
Avoid using #A0ACB6 or #C2CED8 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.
The cool undertones are generally well-received, but always test specific combinations for optimal contrast.

Recommended combinations

Lifting Haze

Ideal for soft, layered backgrounds, subtle gradients, or large content sections requiring a light and expansive feel.

#E4EBF0 · #C2CED8 · #A0ACB6

Deep Focus

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

#5C6670 · #7E8A95 · #E4EBF0

Professional UI

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

#E4EBF0 · #5C6670 · #A0ACB6

CSS variables

:root {
  --misty-morning-fog-1: #5C6670;
  --misty-morning-fog-2: #7E8A95;
  --misty-morning-fog-3: #A0ACB6;
  --misty-morning-fog-4: #C2CED8;
  --misty-morning-fog-5: #E4EBF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-morning-fog": {
        1: "#5C6670",
        2: "#7E8A95",
        3: "#A0ACB6",
        4: "#C2CED8",
        5: "#E4EBF0",
      }
    }
  }
}

Hex values

Color 1#5C6670

Color 2#7E8A95

Color 3#A0ACB6

Color 4#C2CED8

Color 5#E4EBF0

Accessibility

Contrast checker

1.7:1Fail

2.5:1Fail

3.7:1AA18

4.9:1AA

1.7:1Fail

1.5:1Fail

2.2:1Fail

2.9:1Fail

2.5:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail

3.7:1AA18

2.2:1Fail

1.4:1Fail

1.3:1Fail

4.9:1AA

2.9:1Fail

1.9:1Fail

1.3:1Fail

Similar palettes

More like Misty Morning Fog

View all Neutral

Coastal Seagrass Whisper

Clouded Moon Reflection

Foggy Pine Retreat

Quiet Tea Garden

Whispering Willow Grove

Coastal Fog Morning