Palette

Quiet Morning Fog

The peaceful and ethereal tones of a silent, misty morning, calming and subtle.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BCCCDC#F8F8F8#9DA9B7#5D6A7E#C6BEB2

Palette guide

How to use Quiet Morning Fog

Overview

The Quiet Morning Fog palette embodies the peaceful and ethereal tones of a silent, misty morning, offering a calming and subtle aesthetic. With shades ranging from the crisp #F8F8F8 to the deep, muted blue-grey of #5D6A7E, this collection is perfect for creating serene digital and physical spaces. Designers will appreciate the gentle transitions between colors like #BCCCDC and #9DA9B7, which allow for soft layering and depth. Developers can implement these hex codes to craft user interfaces that feel tranquil and sophisticated, fostering a sense of calm and clarity. A unique warm neutral, #C6BEB2, adds a touch of grounding warmth.

Best used for

Wellness and meditation applications
Serene branding for spas or relaxation products
Sophisticated web backgrounds and UI elements
Interior design inspiration for calm spaces
Photography portfolios showcasing landscapes or still life
Mindfulness and self-care content platforms

Suggested color roles

primary

Use #BCCCDC as a soft, cool grey-blue for main content areas or subtle branding accents.

secondary

Employ #9DA9B7 for supporting sections, sub-headers, or UI elements, providing a slightly deeper, muted blue-grey.

accent

Apply #5D6A7E sparingly for strong contrasts, icons, or calls-to-action, adding significant depth and grounding.

background

The crisp #F8F8F8 serves as an excellent, near-white base, ensuring optimal readability for darker text.

text

Utilize #5D6A7E for primary text, offering superb legibility against lighter backgrounds like #F8F8F8.

Accessibility notes

Ensure #5D6A7E text has strong contrast against #F8F8F8, meeting WCAG AA requirements for all text sizes.
Avoid using #BCCCDC or #9DA9B7 for small text on #F8F8F8 backgrounds; contrast may be insufficient.
When placing #C6BEB2 on #F8F8F8, verify contrast for readability, especially for body text.
For interactive elements, always check contrast ratios when combining different shades within this palette.

Recommended combinations

Misty Layers

Creates subtle depth for UI elements or background gradients, mimicking layers of fog.

#F8F8F8 · #BCCCDC · #9DA9B7

Dawn Haze

Excellent for defining content blocks or cards, combining a warm neutral with cool, deep tones.

#C6BEB2 · #BCCCDC · #5D6A7E

Foggy Path

Provides stronger contrasts for headings or key information, ensuring clarity within the subtle palette.

#5D6A7E · #9DA9B7 · #F8F8F8

CSS variables

:root {
  --quiet-morning-fog-1: #BCCCDC;
  --quiet-morning-fog-2: #F8F8F8;
  --quiet-morning-fog-3: #9DA9B7;
  --quiet-morning-fog-4: #5D6A7E;
  --quiet-morning-fog-5: #C6BEB2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-morning-fog": {
        1: "#BCCCDC",
        2: "#F8F8F8",
        3: "#9DA9B7",
        4: "#5D6A7E",
        5: "#C6BEB2",
      }
    }
  }
}

Hex values

Color 1#BCCCDC

Color 2#F8F8F8

Color 3#9DA9B7

Color 4#5D6A7E

Color 5#C6BEB2

Accessibility

Contrast checker

1.5:1Fail

3.3:1AA18

1.1:1Fail

1.5:1Fail

2.2:1Fail

5.2:1AA

1.7:1Fail

1.5:1Fail

2.2:1Fail

2.3:1Fail

1.3:1Fail

3.3:1AA18

5.2:1AA

2.3:1Fail

3:1Fail

1.1:1Fail

1.7:1Fail

1.3:1Fail

3:1Fail

Similar palettes

More like Quiet Morning Fog

Quiet Morning Fog

See it in context.

Ready when you are.

Built with Quiet Morning Fog.

How to use Quiet Morning Fog

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Layers

Dawn Haze

Foggy Path

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Quiet Morning Fog