Palette

Morning Fog

Soft, atmospheric greys capturing the serene, diffusing light of a misty, early morning.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A5F5D#7C8280#A1A7A4#C7CCCA#E8EDED

Palette guide

How to use Morning Fog

Overview

The "Morning Fog" palette offers a sophisticated gradient of cool, atmospheric greys, perfectly capturing the serene, diffusing light of an early morning mist. With hex codes like #5A5F5D (Dark Slate Gray), #7C8280 (Muted Grey), #A1A7A4 (Light Slate Grey), #C7CCCA (Pale Grey), and #E8EDED (Near White), this collection provides a minimalist yet rich visual experience. Designers can leverage these subtle hues to create elegant, understated interfaces, corporate branding, or any project requiring a calm, professional, and timeless aesthetic. It's an excellent choice for conveying stability and modern simplicity.

Best used for

Corporate or professional website designs
Minimalist UI and UX projects
Luxury brand portfolios
Architectural or interior design showcases
Data visualization dashboards
Photography website backgrounds

Suggested color roles

primary

#E8EDED - A very light, almost-white grey, ideal for expansive backgrounds or as a clean canvas for content.

secondary

#C7CCCA - A pale, soft grey, excellent for secondary backgrounds, card elements, or subtle section dividers.

accent

#5A5F5D - The darkest grey, perfect for strong headings, primary text, or bold interactive elements.

background

#A1A7A4 - A mid-tone light slate grey, offering a balanced, calm backdrop for main content blocks.

text

#7C8280 - A muted, mid-dark grey, suitable for body text on lighter backgrounds like #E8EDED or #C7CCCA, ensuring good readability.

Accessibility notes

#5A5F5D provides excellent contrast for text on #E8EDED, #C7CCCA, and #A1A7A4.
#7C8280 offers good readability on #E8EDED and #C7CCCA.
Avoid using lighter greys like #C7CCCA on #A1A7A4 for critical text due to potential low contrast.
Ensure interactive elements have clear visual states, especially when using adjacent grey tones.

Recommended combinations

Foggy Base

#E8EDED for main background, #C7CCCA for content cards, and #A1A7A4 for subtle borders or sidebars.

#E8EDED · #C7CCCA · #A1A7A4

Deep Contrast

#E8EDED as a clean canvas, #5A5F5D for strong headings/buttons, and #7C8280 for body text.

#E8EDED · #5A5F5D · #7C8280

Layered Depth

#A1A7A4 for background, #7C8280 for sub-elements, and #5A5F5D for primary text or icons.

#A1A7A4 · #7C8280 · #5A5F5D

CSS variables

:root {
  --morning-fog-2-1: #5A5F5D;
  --morning-fog-2-2: #7C8280;
  --morning-fog-2-3: #A1A7A4;
  --morning-fog-2-4: #C7CCCA;
  --morning-fog-2-5: #E8EDED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-fog-2": {
        1: "#5A5F5D",
        2: "#7C8280",
        3: "#A1A7A4",
        4: "#C7CCCA",
        5: "#E8EDED",
      }
    }
  }
}

Hex values

Color 1#5A5F5D

Color 2#7C8280

Color 3#A1A7A4

Color 4#C7CCCA

Color 5#E8EDED

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4:1AA18

5.5:1AA

1.7:1Fail

1.6:1Fail

2.4:1Fail

3.3:1AA18

2.7:1Fail

1.6:1Fail

1.5:1Fail

2.1:1Fail

4:1AA18

2.4:1Fail

1.5:1Fail

1.4:1Fail

5.5:1AA

3.3:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Morning Fog

View all monochrome

Soft Greige Cloud

Contemplative Stone Flow