Palette

Cool Glacier Lagoon

Serene and crisp, like the icy blue depths and ethereal reflections of a calm glacial lagoon under an overcast sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0E0E6#87CEEB#4682B4#2F4F4F#1F1F47

Palette guide

How to use Cool Glacier Lagoon

Overview

The Cool Glacier Lagoon palette plunges into the serene and profound depths of icy waters, offering a sophisticated range of cool blues and deep, grounding tones. From the ethereal #B0E0E6 and #87CEEB to the robust #4682B4, culminating in the dark, mysterious #2F4F4F and #1F1F47, this collection evokes the tranquility and power of a glacial landscape. Designers and developers can leverage these hex codes to create immersive, calming, and highly sophisticated interfaces, branding, or digital environments. It's an excellent choice for projects that aim to convey depth, stability, professionalism, and a connection to nature's serene grandeur.

Best used for

Luxury travel agency websites (arctic/oceanic)
Environmental science or research branding
Deep sea exploration documentaries graphics
High-end tech product interfaces (dark mode)
Serene meditation or mindfulness apps
Modern corporate branding (calm & professional)

Suggested color roles

primary

Use #1F1F47 as a dominant, deep primary background or for strong foundational elements.

secondary

Apply #4682B4 for secondary content areas, navigation, or subtle overlays.

accent

Introduce #87CEEB as a refreshing accent for interactive elements or highlighted data.

background

The lighter #B0E0E6 can be used for subtle background textures or very light sections.

text

For optimal readability, use crisp white (#FFFFFF) or a very light grey on the darker colors.

Accessibility notes

Crucially, use light text (white or very light grey) on #1F1F47, #2F4F4F, and #4682B4 for readability.
Ensure sufficient contrast between #87CEEB and any text placed on it, ideally using a dark blue or black.
Avoid placing light blue text on another light blue background without checking WCAG contrast ratios.
Use #B0E0E6 for subtle highlights or borders to distinguish interactive elements against darker tones.

Recommended combinations

Deep Waters

Excellent for immersive dark mode themes, sophisticated headers, or footer sections.

#1F1F47 · #2F4F4F · #B0E0E6

Lagoon Surface

Use for contrasting content blocks, data visualization, or interactive components.

#4682B4 · #87CEEB · #2F4F4F

Icy Reflection

Ideal for creating depth in illustrations, background gradients, or layered UI elements.

#B0E0E6 · #1F1F47 · #87CEEB

CSS variables

:root {
  --cool-glacier-lagoon-1: #B0E0E6;
  --cool-glacier-lagoon-2: #87CEEB;
  --cool-glacier-lagoon-3: #4682B4;
  --cool-glacier-lagoon-4: #2F4F4F;
  --cool-glacier-lagoon-5: #1F1F47;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cool-glacier-lagoon": {
        1: "#B0E0E6",
        2: "#87CEEB",
        3: "#4682B4",
        4: "#2F4F4F",
        5: "#1F1F47",
      }
    }
  }
}

Hex values

Color 1#B0E0E6

Color 2#87CEEB

Color 3#4682B4

Color 4#2F4F4F

Color 5#1F1F47

Accessibility

Contrast checker

1.2:1Fail

2.9:1Fail

6.2:1AA

10.9:1AAA

1.2:1Fail

2.4:1Fail

5.1:1AA

9:1AAA

2.9:1Fail

2.4:1Fail

2.2:1Fail

3.8:1AA18

6.2:1AA

5.1:1AA

2.2:1Fail

1.7:1Fail

10.9:1AAA

9:1AAA

3.8:1AA18

1.7:1Fail

Similar palettes

More like Cool Glacier Lagoon

View all cool

Glacier Stream Flow

Glacial Lagoon Calm

Glacial Lake Serenity

Glacier Bloom Melt

Glacier Lake Serenity

Northern Lake Chill