Palette

Glacial Morning Fog

A cool and calming palette reflecting the ethereal mist and frosted tones of a glacial morning landscape.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F2F4F7#C3D5E3#9BAEC8#6E88A1#415C73

Palette guide

How to use Glacial Morning Fog

Overview

The Glacial Morning Fog palette presents a cool and calming collection of ethereal blue-grays, perfectly capturing the serene mist and frosted tones of a glacial dawn. Ranging from the deep #415C73 to the almost white #F2F4F7, with harmonious mid-tones like #9BAEC8 and #6E88A1, this palette is ideal for designers and developers seeking a sophisticated, minimalist aesthetic. It excels at creating interfaces that feel understated, elegant, and peaceful, offering a refined backdrop for content where clarity and a sense of calm are paramount. This palette supports a truly timeless design approach.

Best used for

Minimalist websites and applications
Luxury interior design and decor
High-end fashion and lifestyle branding
Landscape photography portfolios
Wellness and meditation platforms
Corporate reports with a sophisticated tone

Suggested color roles

primary

Designate #415C73 as the deep, sophisticated primary color for main branding, strong headings, or impactful calls to action.

secondary

Use #6E88A1 for supporting sections, subheadings, or secondary navigation, providing a calming and stable presence.

accent

Apply #9BAEC8 for subtle highlights, delicate borders, or background textures that need a soft, ethereal touch.

background

The very light #F2F4F7 serves as an ideal clean background, enhancing readability and providing a spacious, airy feel.

text

For body text, use #415C73 on #F2F4F7 to ensure excellent contrast and readability, or a dark gray for general content.

Accessibility notes

Ensure #415C73 text on #F2F4F7 background meets WCAG AAA contrast for optimal readability.
Avoid using #C3D5E3 or #9BAEC8 for small text on #F2F4F7, as contrast levels will be insufficient.
Utilize #6E88A1 for important headings on #F2F4F7 to provide good contrast while maintaining the palette's calm.
Interactive elements should primarily use #415C73 to ensure clear visibility and user interaction.

Recommended combinations

Elegant Header

A deep blue-gray header (#415C73) on a light background (#F2F4F7), with a mid-tone supporting element (#6E88A1) for elegance.

#415C73 · #F2F4F7 · #6E88A1

Subtle UI

A gentle user interface featuring a soft blue-gray (#9BAEC8), a slightly darker panel (#C3D5E3), and the lightest background (#F2F4F7) for a misty look.

#9BAEC8 · #C3D5E3 · #F2F4F7

Misty Depth

Combine the mid-tone (#6E88A1) with an airy background (#F2F4F7), using the deep blue-gray (#415C73) for powerful elements and strong contrast.

#6E88A1 · #F2F4F7 · #415C73

CSS variables

:root {
  --glacial-morning-fog-1: #F2F4F7;
  --glacial-morning-fog-2: #C3D5E3;
  --glacial-morning-fog-3: #9BAEC8;
  --glacial-morning-fog-4: #6E88A1;
  --glacial-morning-fog-5: #415C73;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-morning-fog": {
        1: "#F2F4F7",
        2: "#C3D5E3",
        3: "#9BAEC8",
        4: "#6E88A1",
        5: "#415C73",
      }
    }
  }
}

Hex values

Color 1#F2F4F7

Color 2#C3D5E3

Color 3#9BAEC8

Color 4#6E88A1

Color 5#415C73

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.3:1AA18

6.3:1AA

1.4:1Fail

1.5:1Fail

2.4:1Fail

4.6:1AA

2.1:1Fail

1.5:1Fail

1.6:1Fail

3.1:1AA18