Palette

Hazy Morning Mist

A soft, ethereal blend capturing the serene calm of a world veiled in a hazy morning mist.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3D3D3#C0C0C0#A9A9A9#B0C4DE#778899

Palette guide

How to use Hazy Morning Mist

Overview

The Hazy Morning Mist palette captures the ethereal calm and serene beauty of a world softly veiled in fog. This collection of muted greys and gentle blues provides a tranquil and sophisticated foundation for design. The soft #D3D3D3 and #C0C0C0 create a light, airy canvas, reminiscent of diffused light. Mid-tones like #A9A9A9 and the subtle blue-grey of #B0C4DE introduce depth and a cool, misty quality. The deeper #778899 grounds the palette without losing its ethereal charm. This palette is exceptionally versatile for projects aiming for a calm, minimalist, or serene aesthetic, ideal for wellness brands, modern interiors, or contemplative digital experiences.

Best used for

Wellness and meditation apps
Minimalist website design
Modern interior design concepts
Nature-inspired photography backdrops
Serene digital art and illustrations
Cloud computing or tech interfaces

Suggested color roles

primary

Utilize #A9A9A9 as a dominant color for backgrounds or large sections to establish a calm, sophisticated, and understated mood.

secondary

Apply #778899 for important headings or accents to introduce subtle depth and grounding while maintaining the serene aesthetic.

accent

Highlight key information or interactive elements with #D3D3D3 for a bright, airy contrast, or #B0C4DE for a soft, cool touch.

background

Employ #D3D3D3 or #C0C0C0 as a light, ethereal background, providing excellent readability for darker text elements.

text

For optimal readability on light backgrounds like #D3D3D3, use #778899 or a dark charcoal. For dark backgrounds, #D3D3D3 provides clear contrast.

Accessibility notes

Ensure #778899 text on #D3D3D3 or #C0C0C0 backgrounds meets WCAG AA contrast standards.
Avoid using #A9A9A9 on #B0C4DE for small text; contrast will likely be insufficient.
Always verify contrast ratios for all text and interactive elements, especially between the similar grey tones.
Consider using slightly darker text on #D3D3D3 for improved readability for users with visual impairments.

Recommended combinations

Misty Depths

Excellent for robust branding, creating a balanced and serene feel for headers and core content.

#778899 · #A9A9A9 · #D3D3D3

Foggy Horizon

Ideal for backgrounds with complementary text, or for highlighting specific sections with a cool, subtle glow.

#A9A9A9 · #B0C4DE · #C0C0C0

Morning Light

Perfect for UI elements, buttons, and subtle accents, providing a gentle yet clear visual hierarchy for a calm aesthetic.

#D3D3D3 · #B0C4DE · #778899

CSS variables

:root {
  --hazy-morning-mist-1: #D3D3D3;
  --hazy-morning-mist-2: #C0C0C0;
  --hazy-morning-mist-3: #A9A9A9;
  --hazy-morning-mist-4: #B0C4DE;
  --hazy-morning-mist-5: #778899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "hazy-morning-mist": {
        1: "#D3D3D3",
        2: "#C0C0C0",
        3: "#A9A9A9",
        4: "#B0C4DE",
        5: "#778899",
      }
    }
  }
}

Hex values

Color 1#D3D3D3

Color 2#C0C0C0

Color 3#A9A9A9

Color 4#B0C4DE

Color 5#778899

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

1.2:1Fail

2.4:1Fail

1.2:1Fail

1.3:1Fail

1:1Fail

2:1Fail

1.6:1Fail

1.3:1Fail

1.5:1Fail

1.2:1Fail

1:1Fail

1.3:1Fail

2:1Fail

2.4:1Fail

2:1Fail

1.5:1Fail

2:1Fail

Similar palettes

More like Hazy Morning Mist

Hazy Morning Mist

See it in context.

Ready when you are.

Built with Hazy Morning Mist.

How to use Hazy Morning Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Depths

Foggy Horizon

Morning Light

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Hazy Morning Mist