Palette

Cool Glacier Mist

Icy blues and misty whites, evoking the serene and ethereal atmosphere of a glacial landscape.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#B0E0E6#87CEEB#6A8CA8#4D6B8C

Palette guide

How to use Cool Glacier Mist

Overview

The Cool Glacier Mist palette embodies the serene and ethereal beauty of an icy landscape shrouded in a gentle fog. Featuring crisp white #F0F8FF, soft sky blue #B0E0E6, and increasingly deeper blue-greys like #87CEEB, #6A8CA8, and #4D6B8C, this collection creates a harmonious and tranquil atmosphere. Designers and developers can leverage these hex codes to craft clean, elegant, and calming interfaces, branding, or digital experiences that convey purity, sophistication, and a breath of fresh air. It's an excellent choice for projects seeking a minimalist yet profound aesthetic, offering a sense of peace and clarity.

Best used for

Minimalist corporate websites
High-end skincare or beauty product branding
Cloud computing service interfaces
Winter fashion lookbooks
Architectural visualization projects
Calming meditation app designs

Suggested color roles

primary

Use #F0F8FF as a clean, expansive primary background, offering a fresh canvas.

secondary

Apply #B0E0E6 for secondary content areas, card backgrounds, or subtle dividers.

accent

Introduce #87CEEB as a gentle accent for interactive elements or highlighted text.

background

The deeper #4D6B8C can serve as a sophisticated background for footers or sidebars.

text

A dark blue-grey (#36454F) or charcoal (#333333) provides excellent contrast on lighter tones.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter blues on the white background.
Text in a dark color on #F0F8FF, #B0E0E6, and #87CEEB will generally be highly readable.
For #6A8CA8 and #4D6B8C, white text (#FFFFFF) will provide the best contrast.
Use a slightly darker shade from the palette for borders or outlines to define interactive elements.

Recommended combinations

Misty Horizon

Excellent for clean headers, spacious backgrounds, or subtle gradient effects.

#F0F8FF · #B0E0E6 · #87CEEB

Deep Mist

Use for strong section dividers, sophisticated footers, or dark mode components.

#6A8CA8 · #4D6B8C · #B0E0E6

Clear & Calm

Ideal for creating depth in UI cards, informational blocks, or serene illustrations.

#87CEEB · #F0F8FF · #B0E0E6

CSS variables

:root {
  --cool-glacier-mist-1: #F0F8FF;
  --cool-glacier-mist-2: #B0E0E6;
  --cool-glacier-mist-3: #87CEEB;
  --cool-glacier-mist-4: #6A8CA8;
  --cool-glacier-mist-5: #4D6B8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cool-glacier-mist": {
        1: "#F0F8FF",
        2: "#B0E0E6",
        3: "#87CEEB",
        4: "#6A8CA8",
        5: "#4D6B8C",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#B0E0E6

Color 3#87CEEB

Color 4#6A8CA8

Color 5#4D6B8C

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

3.3:1AA18

5.2:1AA

1.3:1Fail

1.2:1Fail

2.5:1Fail

3.9:1AA18

1.6:1Fail

1.2:1Fail

2:1Fail

3.2:1AA18

3.3:1AA18

2.5:1Fail

2:1Fail

1.6:1Fail

5.2:1AA

3.9:1AA18

3.2:1AA18

1.6:1Fail

Similar palettes

More like Cool Glacier Mist

Cool Glacier Mist

See it in context.

Ready when you are.

Built with Cool Glacier Mist.

How to use Cool Glacier Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Horizon

Deep Mist

Clear & Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cool Glacier Mist