Palette

Winter Glacier Bloom

Soft, muted blues and whites, like the subtle bloom of ice formations on a serene winter glacier.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8BBCCF#AED4E9#DAF0F7#72A7BD#C0E1F0

Palette guide

How to use Winter Glacier Bloom

Overview

The Winter Glacier Bloom palette, featuring serene blues like #8BBCCF, #AED4E9, and the delicate #DAF0F7, evokes the calm beauty of a frozen landscape. This collection also includes the deeper #72A7BD and gentle #C0E1F0, offering a harmonious blend of cool tones. Ideal for designers and developers seeking to create tranquil, sophisticated, and clean interfaces or branding. Its soft, muted nature provides a sense of peace and clarity, making it versatile for both digital and print applications where a cool, refreshing aesthetic is desired without being stark.

Best used for

Spa and wellness branding
Medical or healthcare websites
Tech interfaces and app designs
Winter apparel or lifestyle products
Baby product packaging
Eco-friendly or sustainability campaigns

Suggested color roles

primary

#72A7BD. Use this deeper blue for primary calls-to-action, key headings, or prominent branding elements where a strong yet calm presence is needed.

secondary

#8BBCCF. Excellent for subheadings, navigation elements, or larger blocks of color that support the primary hue without overwhelming the design.

accent

#AED4E9. Deploy this lighter blue for subtle interactive elements, hover states, or delicate graphic accents to add a touch of lightness and visual interest.

background

#DAF0F7. This almost-white, ethereal blue creates a clean, expansive, and calming backdrop for web pages, print materials, or user interfaces, enhancing readability.

text

For optimal readability on light backgrounds like #DAF0F7, consider using #72A7BD for headings and a deep charcoal or near-black for body text to ensure strong contrast.

Accessibility notes

Ensure sufficient contrast when pairing lighter colors like #AED4E9 or #C0E1F0 with #DAF0F7, especially for small text; prefer #72A7BD or a dark neutral.
The darkest blue, #72A7BD, offers excellent contrast against #DAF0F7 for body text and critical information.
Avoid using #AED4E9 or #C0E1F0 for essential text on a #DAF0F7 background, as this combination will likely fail WCAG AA standards for small text.
For interactive elements, always test the contrast of the active state against its background to ensure clear visibility for all users.

Recommended combinations

Core Serenity

Ideal for primary UI elements, offering strong readability for text (#72A7BD) on a clean background (#DAF0F7), supported by a softer secondary (#8BBCCF).

#72A7BD · #DAF0F7 · #8BBCCF

Icy Accents

Perfect for subtle layering and highlights, using the lightest hues to create depth and gentle visual interest on a pristine background.

#DAF0F7 · #AED4E9 · #C0E1F0

Deep Contrast

Ensures maximum legibility for body text (#000000) against the airy #DAF0F7 background, with #72A7BD as a strong header or accent.

#72A7BD · #DAF0F7 · #C0E1F0

CSS variables

:root {
  --winter-glacier-bloom-4-1: #8BBCCF;
  --winter-glacier-bloom-4-2: #AED4E9;
  --winter-glacier-bloom-4-3: #DAF0F7;
  --winter-glacier-bloom-4-4: #72A7BD;
  --winter-glacier-bloom-4-5: #C0E1F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-glacier-bloom-4": {
        1: "#8BBCCF",
        2: "#AED4E9",
        3: "#DAF0F7",
        4: "#72A7BD",
        5: "#C0E1F0",
      }
    }
  }
}

Hex values

Color 1#8BBCCF

Color 2#AED4E9

Color 3#DAF0F7

Color 4#72A7BD

Color 5#C0E1F0

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

1.3:1Fail

1.5:1Fail

1.3:1Fail

1.7:1Fail

1.1:1Fail

1.7:1Fail

1.3:1Fail

2.2:1Fail

1.2:1Fail

1.3:1Fail

1.7:1Fail

2.2:1Fail

1.9:1Fail

1.5:1Fail

1.1:1Fail

1.2:1Fail

1.9:1Fail

Similar palettes

More like Winter Glacier Bloom

Winter Glacier Bloom

See it in context.

Ready when you are.

Built with Winter Glacier Bloom.

How to use Winter Glacier Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Core Serenity

Icy Accents

Deep Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Winter Glacier Bloom