Palette

Serene Morning Fog

A calming gradient of pale grays and whites that perfectly captures the quiet mystery of a misty morning.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0E8E8#D4DCDD#C2C9CA#B0B5B6#A0A3A4

Palette guide

How to use Serene Morning Fog

Overview

The Serene Morning Fog palette perfectly captures the quiet mystery of a misty morning through its calming gradient of pale grays and whites. Ranging from the almost ethereal #E0E8E8 to the subtly deeper #A0A3A4, with harmonious mid-tones like #D4DCDD and #C2C9CA, this monochromatic collection exudes understated elegance and tranquility. It's an ideal choice for designers aiming for a sophisticated, minimalist, and peaceful aesthetic. Developers can leverage these subtle neutrals for clean, modern interfaces, luxury brand websites, or any digital space where a soft, unobtrusive, and timeless design is paramount, promoting focus and a sense of calm.

Best used for

Luxury minimalist branding
High-end architectural portfolios
Art gallery websites
Meditation and mindfulness platforms
Elegant stationery design
Modern interior design concepts

Suggested color roles

primary

#B0B5B6 - A balanced, sophisticated gray, perfect for establishing a subtle and elegant brand presence.

secondary

#C2C9CA - A lighter, airy gray for subheadings, subtle accents, or supporting graphic elements.

accent

#D4DCDD - A very pale gray that provides a gentle highlight, ideal for dividers or hover states without distraction.

background

#E0E8E8 - A very light, almost white gray, ideal for clean, spacious, and ethereal backgrounds.

text

#A0A3A4 for primary text on light backgrounds, or a deep charcoal/black for optimal readability on lighter grays.

Accessibility notes

Ensure significant contrast for text, as many palette colors are very close in value. #A0A3A4 on #E0E8E8 is a good pairing.
Avoid using #D4DCDD or #C2C9CA for small text against #E0E8E8; they will likely fail WCAG AA.
For primary text, consider using a true black or very dark charcoal if #A0A3A4 doesn't provide enough contrast on some elements.
Use larger font sizes and bolding for emphasis when using lighter grays for text.

Recommended combinations

Misty Contrast

A soft, yet clear pairing for minimalist headers or main content, with a light background and subtle depth.

#E0E8E8 · #A0A3A4 · #B0B5B6

Fog Gradient

Smooth, atmospheric gradient for backgrounds or layered UI elements, evoking depth within subtlety.

#D4DCDD · #C2C9CA · #B0B5B6

Subtle Depth

A darker base with a very light accent, balanced by a mid-tone for secondary content, creating quiet sophistication.

#A0A3A4 · #E0E8E8 · #C2C9CA

CSS variables

:root {
  --serene-morning-fog-1: #E0E8E8;
  --serene-morning-fog-2: #D4DCDD;
  --serene-morning-fog-3: #C2C9CA;
  --serene-morning-fog-4: #B0B5B6;
  --serene-morning-fog-5: #A0A3A4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-morning-fog": {
        1: "#E0E8E8",
        2: "#D4DCDD",
        3: "#C2C9CA",
        4: "#B0B5B6",
        5: "#A0A3A4",
      }
    }
  }
}

Hex values

Color 1#E0E8E8

Color 2#D4DCDD

Color 3#C2C9CA

Color 4#B0B5B6

Color 5#A0A3A4

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.7:1Fail

2:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.8:1Fail

1.4:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

2:1Fail

1.8:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Serene Morning Fog

Serene Morning Fog

See it in context.

Ready when you are.

Built with Serene Morning Fog.

How to use Serene Morning Fog

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Contrast

Fog Gradient

Subtle Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Serene Morning Fog