Palette

Winter Glacier Mist

Cool blues and muted grays conjure the ethereal, chilling beauty of mist hovering over a winter glacier.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Glacier 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 Winter Glacier Mist.

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

Data visualization

#2C3E50#627A8A#9BB5C0#CADDE5#E9F2F7

Palette guide

How to use Winter Glacier Mist

Overview

The Winter Glacier Mist palette offers a serene, cool aesthetic, ideal for evoking a tranquil, icy landscape. Dominated by deep, muted blues and grays, it transitions from the dark depth of #2C3E50 to the soft, ethereal #E9F2F7. This collection of shades, including the mid-tone #627A8A and the lighter #9BB5C0, provides designers with a sophisticated range for creating calm, professional, and visually appealing digital or print experiences. The palette's cool undertones are perfect for conveying reliability and understated elegance, making it versatile for various design applications. Use #CADDE5 for subtle accents or softer backgrounds, ensuring a harmonious balance across your project.

Best used for

Corporate websites and branding
Winter-themed marketing materials
Serene UI/UX designs for apps
Photography portfolios (especially nature/landscape)
Interior design mood boards
Elegant packaging design

Suggested color roles

primary

Use #2C3E50 for strong headers, primary navigation, or calls to action to establish a solid, dependable presence.

secondary

Ideal for subheadings, secondary buttons, or large content blocks using #627A8A, offering a gentler contrast.

accent

A subtle, cool accent using #9BB5C0 for interactive elements, highlights, or graphical details that need a soft lift.

background

Provides a clean, airy canvas with #E9F2F7 that allows darker elements to stand out without harshness.

text

Excellent for main body text using #2C3E50, ensuring readability against lighter backgrounds like #E9F2F7. For lighter text on dark backgrounds, use a near-white.

Accessibility notes

Ensure sufficient contrast between #2C3E50 text and #E9F2F7 background for optimal readability.
Avoid placing #9BB5C0 text directly on #CADDE5 as contrast may be too low for accessibility standards.
Use a color contrast checker for all text and interactive element pairings, especially the mid-tones.
Reserve #E9F2F7 for backgrounds or very large, non-essential text elements to maintain legibility.

Recommended combinations

Deep Contrast

High-contrast pairing for primary text on light backgrounds, with a supporting mid-tone.

#2C3E50 · #E9F2F7 · #627A8A

Muted Harmony

Creates a soft, harmonious feel for secondary content areas or subtle branding elements.

#627A8A · #CADDE5 · #9BB5C0

Ethereal Blend

Light and airy combination, perfect for backgrounds, headers, or delicate graphical elements.

#E9F2F7 · #CADDE5 · #9BB5C0

CSS variables

:root {
  --winter-glacier-mist-2-1: #2C3E50;
  --winter-glacier-mist-2-2: #627A8A;
  --winter-glacier-mist-2-3: #9BB5C0;
  --winter-glacier-mist-2-4: #CADDE5;
  --winter-glacier-mist-2-5: #E9F2F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-glacier-mist-2": {
        1: "#2C3E50",
        2: "#627A8A",
        3: "#9BB5C0",
        4: "#CADDE5",
        5: "#E9F2F7",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#627A8A

Color 3#9BB5C0

Color 4#CADDE5

Color 5#E9F2F7

Accessibility

Contrast checker

2.4:1Fail

5.1:1AA

7.8:1AAA

9.7:1AAA

2.4:1Fail

2.1:1Fail

3.2:1AA18

4:1AA18

5.1:1AA

2.1:1Fail

1.5:1Fail

1.9:1Fail

7.8:1AAA

3.2:1AA18

1.5:1Fail

1.2:1Fail

9.7:1AAA

4:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Winter Glacier Mist

View all cool

Arctic Explorer's Dream