Palette

Glacial Lake Bloom

Cool, crystalline blues inspired by the icy depths and serene surface of a glacial lake.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Lake Bloom 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 Lake Bloom.

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

Data visualization

#2A506E#5A8AAB#8CD1EC#B7E3F0#E0F2F7

Palette guide

How to use Glacial Lake Bloom

Overview

The Glacial Lake Bloom palette presents a cool, crystalline collection of blues inspired by the icy depths and serene surface of a glacial lake. This sophisticated palette, ranging from the deep #2A506E to the ethereal #E0F2F7, offers designers a harmonious blend of profound depth and airy lightness. The robust #2A506E provides a strong anchor, while #5A8AAB and #8CD1EC introduce refreshing mid-tones. The very light #B7E3F0 and #E0F2F7 ensure a clean, expansive feel. This palette is excellent for creating calm, professional, and visually compelling digital experiences or branding materials that evoke nature's tranquil power.

Best used for

Environmental agency websites
Luxury wellness and spa brands
Data visualization and analytics platforms
Clean, minimalist web and app design
Winter-themed event branding
Nature-inspired product packaging

Suggested color roles

primary

#2A506E - This deep, rich blue serves as a strong primary for foundational elements like headers, footers, or main navigation, providing stability and depth.

secondary

#5A8AAB - A balanced mid-tone blue, excellent for secondary navigation, card backgrounds, or subtle graphical elements, offering gentle contrast.

accent

#8CD1EC - This bright, clear blue works well for vibrant accents, interactive element hover states, or small decorative details, adding a refreshing pop.

background

#E0F2F7 - An ethereal, almost white hue, ideal for expansive main content areas, providing a bright, clean, and airy canvas that allows darker colors to pop.

text

#2A506E - Excellent for primary body text on light backgrounds like #E0F2F7 or #B7E3F0, ensuring strong readability and maintaining the cool aesthetic.

Accessibility notes

Ensure #2A506E text on #E0F2F7 background meets WCAG contrast standards for readability.
Avoid using lighter blues like #B7E3F0 or #8CD1EC for small text against #E0F2F7, as contrast may be insufficient.
Use #8CD1EC for interactive elements, but confirm it contrasts well against its immediate background.
When layering colors, ensure enough tonal difference between adjacent lighter blues (e.g., #B7E3F0 and #E0F2F7) for clear visual separation.

Recommended combinations

Deep & Clear

Provides high contrast for impactful headings, critical information, or calls-to-action against a clean, light background.

#2A506E · #E0F2F7 · #5A8AAB

Lake Depth

Creates a smooth, flowing transition of blues, ideal for background gradients, layered UI elements, or illustrating depth.

#5A8AAB · #8CD1EC · #B7E3F0

Calm Foundation

Uses the darkest blue for structure and the lightest as a background, with white text on the dark blue for readability.

#2A506E · #E0F2F7 · #8CD1EC

CSS variables

:root {
  --glacial-lake-bloom-1: #2A506E;
  --glacial-lake-bloom-2: #5A8AAB;
  --glacial-lake-bloom-3: #8CD1EC;
  --glacial-lake-bloom-4: #B7E3F0;
  --glacial-lake-bloom-5: #E0F2F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-lake-bloom": {
        1: "#2A506E",
        2: "#5A8AAB",
        3: "#8CD1EC",
        4: "#B7E3F0",
        5: "#E0F2F7",
      }
    }
  }
}

Hex values

Color 1#2A506E

Color 2#5A8AAB

Color 3#8CD1EC

Color 4#B7E3F0

Color 5#E0F2F7

Accessibility

Contrast checker

2.3:1Fail

5:1AA

6.2:1AA

7.4:1AAA

2.3:1Fail

2.2:1Fail

2.7:1Fail

3.2:1AA18

5:1AA

2.2:1Fail

1.2:1Fail

1.5:1Fail

6.2:1AA

2.7:1Fail

1.2:1Fail

7.4:1AAA

3.2:1AA18

1.5:1Fail

1.2:1Fail

Similar palettes

More like Glacial Lake Bloom

Glacial Lake Bloom

See it in context.

Ready when you are.

Built with Glacial Lake Bloom.

How to use Glacial Lake Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep & Clear

Lake Depth

Calm Foundation

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Glacial Lake Bloom