Palette

Morning Fog Serene

Soft, muted tones evoke the tranquil, muted beauty of a quiet foggy morning landscape.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9FA8A4#C0C8C5#DFE2E0#6C7470#B1B8B5

Palette guide

How to use Morning Fog Serene

Overview

The "Morning Fog Serene" palette offers a collection of soft, muted grays and greens, perfect for creating a tranquil and understated aesthetic. Dominated by the soothing main tone of #9FA8A4, complemented by the lighter #C0C8C5 and the very light #DFE2E0, this palette evokes the peaceful calm of a misty dawn. The deeper #6C7470 provides a grounding contrast, while #B1B8B5 adds a slightly warmer, yet equally subdued, mid-tone. Designers and developers can leverage these versatile neutrals to build sophisticated interfaces, branding, or editorial layouts that prioritize serenity and clarity. Its gentle nature makes it ideal for backgrounds, subtle UI elements, and a sophisticated, minimalist approach, ensuring readability and a calming user experience without overwhelming the senses.

Best used for

Minimalist website designs and UI/UX
Luxury brand identity and packaging
Spa, wellness, or meditation app interfaces
Editorial layouts for art, design, or nature magazines
Interior design concepts for serene living spaces
Subtle background textures and overlays

Suggested color roles

primary

#9FA8A4 - Serves as the foundational color for large sections, headers, or main content blocks. Its balanced tone is calming and professional.

secondary

#C0C8C5 - Excellent for supporting elements, secondary navigation, or card backgrounds. It provides a subtle lift from the primary without stark contrast.

accent

#6C7470 - Use this deeper tone sparingly for key interactive elements like buttons, icons, or important highlights where a subtle emphasis is needed.

background

#DFE2E0 - Ideal for page backgrounds or large container areas, offering a clean, airy canvas that enhances readability without being stark white.

text

For optimal readability, use a dark charcoal or nearly black text (e.g., #333333) against the light background #DFE2E0. For lighter text on darker elements like #6C7470, a soft white (e.g., #F0F0F0) works well.

Accessibility notes

Ensure sufficient contrast between #6C7470 text and #DFE2E0 background (or vice-versa) to meet WCAG AA standards for large text.
Text set in #9FA8A4 or #C0C8C5 on the #DFE2E0 background will likely require careful testing for small font sizes to ensure readability.
For interactive elements, provide visual feedback (e.g., hover states) that significantly increases contrast or changes hue.
Avoid using #C0C8C5 or #B1B8B5 for critical body text content on a #DFE2E0 background due to inherently low contrast.

Recommended combinations

Serene Base

Perfect for creating a light, airy foundation for web pages or app screens, with #DFE2E0 as background, #C0C8C5 for cards, and #9FA8A4 for main headings.

#DFE2E0 · #C0C8C5 · #9FA8A4

Deep Contrast

Use #DFE2E0 as a clean background, #9FA8A4 for primary content areas, and #6C7470 for strong accents, interactive elements, or readable dark text.

#DFE2E0 · #9FA8A4 · #6C7470

Muted Depth

Ideal for creating more subdued, tonal designs where the focus is on subtle shifts and texture, suitable for data visualizations or complex dashboards.

#C0C8C5 · #B1B8B5 · #6C7470

CSS variables

:root {
  --morning-fog-serene-1: #9FA8A4;
  --morning-fog-serene-2: #C0C8C5;
  --morning-fog-serene-3: #DFE2E0;
  --morning-fog-serene-4: #6C7470;
  --morning-fog-serene-5: #B1B8B5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-fog-serene": {
        1: "#9FA8A4",
        2: "#C0C8C5",
        3: "#DFE2E0",
        4: "#6C7470",
        5: "#B1B8B5",
      }
    }
  }
}

Hex values

Color 1#9FA8A4

Color 2#C0C8C5

Color 3#DFE2E0

Color 4#6C7470

Color 5#B1B8B5

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

2:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

2.8:1Fail

1.2:1Fail

1.9:1Fail

1.3:1Fail

3.7:1AA18

1.5:1Fail

2:1Fail

2.8:1Fail

3.7:1AA18

2.4:1Fail

1.2:1Fail

1.5:1Fail

2.4:1Fail

Similar palettes

More like Morning Fog Serene

Morning Fog Serene

See it in context.

Ready when you are.

Built with Morning Fog Serene.

How to use Morning Fog Serene

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Serene Base

Deep Contrast

Muted Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Morning Fog Serene