Back to palettes

Palette

Morning Fog

Soft, cool greys mimic the gentle, shrouding embrace of morning fog, creating a peaceful, quiet atmosphere.

neutralcalm5 colors
More neutral 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

#D3D3D3#A9A9A9#808080#696969#778899

Palette guide

How to use Morning Fog

Overview

The "Morning Fog" palette offers a sophisticated range of cool greys, perfect for creating a calm, minimalist, and professional aesthetic. Featuring shades like the light #D3D3D3, the balanced #A9A9A9, and the deeper #808080, this collection is ideal for designers and developers seeking a muted yet elegant foundation. The inclusion of the unique blue-grey #778899 adds a subtle, refreshing touch without disrupting the overall tranquil mood. Use this palette to build user interfaces, corporate websites, or branding that conveys quiet strength and refined simplicity. Its versatility makes it excellent for both primary backgrounds and intricate UI components, ensuring a cohesive and understated visual experience.

Best used for

  • Minimalist UI design for apps and websites
  • Corporate or luxury brand identity
  • Backgrounds and base layers in web development
  • Tech and SaaS product interfaces
  • Elegant print materials and packaging
  • Photography portfolio websites

Suggested color roles

primary

#A9A9A9 - A balanced mid-grey, excellent for main content blocks, card backgrounds, or primary navigation elements. It provides a stable visual anchor.

secondary

#808080 - A deeper grey that offers good contrast against lighter shades. Ideal for secondary headings, borders, or active states in UI components.

accent

#778899 - This subtle blue-grey provides a cool, sophisticated accent. Use it sparingly for interactive elements, highlights, or graphical details to add a touch of color without overwhelming the neutral base.

background

#D3D3D3 - The lightest shade, perfect for clean, expansive backgrounds. It ensures readability and a bright, airy feel without being stark white.

text

#696969 - A dark, readable grey for body text and critical information. For larger headings, consider a near-black for maximum impact and legibility.

Accessibility notes

  • Ensure sufficient contrast between #D3D3D3 backgrounds and any text or interactive elements placed upon them; a darker text color like #696969 is crucial.
  • Avoid using #A9A9A9 or #808080 for small text on a #D3D3D3 background without checking WCAG AA/AAA contrast ratios.
  • When using #778899 as an accent, ensure it doesn't carry critical information if its contrast with the background is low.
  • For UI elements like buttons or links, ensure their default state color contrasts well with the background and that hover/active states maintain readability.

Recommended combinations

Soft Base

Excellent for creating a subtle, clean interface foundation. Use #D3D3D3 for backgrounds, #A9A9A9 for card elements, and #696969 for body text.

#D3D3D3 · #A9A9A9 · #696969

Misty Focus

Ideal for drawing attention to key sections. #A9A9A9 as a section background, #808080 for headings, and #778899 for interactive buttons or icons.

#A9A9A9 · #808080 · #778899

Deep Contrast

Maximizes readability and hierarchy. #D3D3D3 for the main canvas, #696969 for primary text, and #808080 for strong headings or dividers.

#D3D3D3 · #696969 · #808080

CSS variables

:root {
  --morning-fog-1: #D3D3D3;
  --morning-fog-2: #A9A9A9;
  --morning-fog-3: #808080;
  --morning-fog-4: #696969;
  --morning-fog-5: #778899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-fog": {
        1: "#D3D3D3",
        2: "#A9A9A9",
        3: "#808080",
        4: "#696969",
        5: "#778899",
      }
    }
  }
}

Related searches

cool grey color paletteneutral ui design colorscalm web design palettemuted grey tonesminimalist color scheme

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#A9A9A9
·
Color 3#808080
·
Color 4#696969
·
Color 5#778899
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
3.7:1AA18
2.4:1Fail
2
1.6:1Fail
1.7:1Fail
2.3:1Fail
1.5:1Fail
3
2.6:1Fail
1.7:1Fail
1.4:1Fail
1.1:1Fail
4
3.7:1AA18
2.3:1Fail
1.4:1Fail
1.5:1Fail
5
2.4:1Fail
1.5:1Fail
1.1:1Fail
1.5:1Fail

Similar palettes

More like Morning Fog

View all neutral
Coastal Driftwood Grey
Dusky Bloom Hues
Dusky Cloud Blanket
Misty Mountain Morning
Quiet Mountain Haze
Rocky Shore Mist