Palette

Glacier Bloom Melt

Refreshing blues and hints of frosty white, capturing the delicate beauty of ice melting under spring sun.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B3D8E6#8DBBD4#5A8CA3#2C5D72#DBEDF4

Palette guide

How to use Glacier Bloom Melt

Overview

The Glacier Bloom Melt palette captures the delicate transition of ice under the spring sun, offering a refreshing gradient of cool blues. From the airy #DBEDF4, reminiscent of frosty white, it deepens through #B3D8E6 and #8DBBD4, evoking melting ice formations. The more saturated #5A8CA3 and the profound #2C5D72 ground the palette, suggesting the depth of glacial waters. This collection provides designers and developers with a harmonious blend of cool tones, perfect for projects that require a sense of tranquility, natural beauty, and a subtle hint of awakening or renewal. It’s elegant and subtly dynamic.

Best used for

Environmental organizations or campaigns
Spring/summer apparel or home goods
Wellness and relaxation apps
Nature photography portfolios
Branding for eco-friendly products
Scientific or educational content on glaciers

Suggested color roles

primary

#2C5D72 (Deep Blue-Gray) - An excellent choice for dominant elements, headers, or footers, providing a stable and serious foundation.

secondary

#5A8CA3 (Muted Blue) - Suited for sub-sections, background panels, or graphic elements that require a softer presence than the primary.

accent

#8DBBD4 (Medium Blue) - Use for interactive elements, calls to action, or key highlights to draw attention with a refreshing pop.

background

#DBEDF4 (Very Light Blue) - Provides a clean, expansive canvas, ensuring high readability for darker text and an overall airy feel.

text

A dark charcoal or near-black like #222222 works best for body text against light backgrounds. Use #2C5D72 for significant headings.

Accessibility notes

#2C5D72 and #5A8CA3 provide excellent contrast against #DBEDF4 for all text sizes.
Be cautious using #B3D8E6 or #8DBBD4 for small text on #DBEDF4; always check contrast.
Ensure sufficient visual cues for interactive elements, especially if using lighter shades.
Prioritize #2C5D72 for critical information and primary calls to action for maximum readability.

Recommended combinations

Spring Thaw UI

A clean web layout with a very light background, soft card elements, and a strong, grounding color for buttons.

#DBEDF4 · #B3D8E6 · #2C5D72

Reflective Layers

Create layered graphics or sections, deepening from a mid-blue to a rich, dark blue for visual depth.

#8DBBD4 · #5A8CA3 · #2C5D72

Subtle Highlights

Use the lightest blue as a base, the muted blue for content, and the medium blue for subtle highlights or links.

#DBEDF4 · #5A8CA3 · #8DBBD4

CSS variables

:root {
  --glacier-bloom-melt-1: #B3D8E6;
  --glacier-bloom-melt-2: #8DBBD4;
  --glacier-bloom-melt-3: #5A8CA3;
  --glacier-bloom-melt-4: #2C5D72;
  --glacier-bloom-melt-5: #DBEDF4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacier-bloom-melt": {
        1: "#B3D8E6",
        2: "#8DBBD4",
        3: "#5A8CA3",
        4: "#2C5D72",
        5: "#DBEDF4",
      }
    }
  }
}

Hex values

Color 1#B3D8E6

Color 2#8DBBD4

Color 3#5A8CA3

Color 4#2C5D72

Color 5#DBEDF4

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

4.8:1AA

1.3:1Fail

1.4:1Fail

1.8:1Fail

3.5:1AA18

1.7:1Fail

2.4:1Fail

1.8:1Fail

2:1Fail

3.1:1AA18

4.8:1AA

3.5:1AA18

2:1Fail

6:1AA

1.3:1Fail

1.7:1Fail

3.1:1AA18

6:1AA

Similar palettes

More like Glacier Bloom Melt

View all cool

Arctic Glacier Lagoon

Cool Glacier Lagoon

Glacial Lagoon Calm

Glacial Lake Serenity

Glacier Lake Serenity

Glacier Stream Flow