Back to palettes

Palette

Winter Glimmer

Soft, muted blues and frosty whites convey the quiet stillness of a serene winter landscape.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CDE1EB#E7F0F4#B5D1E1#A0BCCE#D1E7F0

Palette guide

How to use Winter Glimmer

Overview

The Winter Glimmer palette embodies the quiet stillness of a serene winter landscape with its soft, muted blues and frosty whites. This collection, ranging from the light, airy #E7F0F4 to the slightly deeper #A0BCCE, offers a delicate and calming aesthetic. The various shades of light blue, including #CDE1EB and #B5D1E1, provide subtle variations that create depth without harsh contrasts, making it perfect for designs seeking a gentle, ethereal touch. Designers can leverage this palette for projects requiring a peaceful, sophisticated, and visually soft experience, from user interfaces to branding.

Best used for

  • Baby product branding
  • Wedding invitations
  • Healthcare websites
  • Spa and wellness apps
  • Delicate fashion accessories
  • Serene home decor brands

Suggested color roles

primary

Use #A0BCCE for main headings or important elements, providing a gentle yet clear presence.

secondary

Ideal for subheadings, secondary buttons, or larger content blocks using #B5D1E1, offering a subtle distinction.

accent

A very soft accent using #CDE1EB for interactive elements, highlights, or decorative flourishes.

background

Provides an extremely light, almost white canvas with #E7F0F4, enhancing the palette's delicate and airy feel.

text

Suitable for body text using #A0BCCE on the lightest backgrounds, though a slightly darker charcoal is recommended for optimal readability on #E7F0F4.

Accessibility notes

  • Due to the light nature of this palette, ensure all text has sufficient contrast, especially for small font sizes.
  • Text in #A0BCCE on #E7F0F4 may struggle to meet WCAG AA contrast for regular text; consider a darker text color.
  • Avoid using #CDE1EB, #B5D1E1, or #D1E7F0 for text unless very large or purely decorative.
  • Interactive elements should have clear hover/focus states and potentially an icon to aid usability for low-contrast elements.

Recommended combinations

Soft Clarity

Creates a clean, gentle look suitable for primary text and backgrounds, with a subtle accent.

#A0BCCE · #E7F0F4 · #B5D1E1

Ethereal Blend

A harmonious gradient for soft backgrounds, headers, or decorative elements.

#E7F0F4 · #D1E7F0 · #CDE1EB

Subtle Depth

Use for layered elements or sections where a slight visual distinction is desired without strong contrast.

#A0BCCE · #CDE1EB · #B5D1E1

CSS variables

:root {
  --winter-glimmer-1: #CDE1EB;
  --winter-glimmer-2: #E7F0F4;
  --winter-glimmer-3: #B5D1E1;
  --winter-glimmer-4: #A0BCCE;
  --winter-glimmer-5: #D1E7F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-glimmer": {
        1: "#CDE1EB",
        2: "#E7F0F4",
        3: "#B5D1E1",
        4: "#A0BCCE",
        5: "#D1E7F0",
      }
    }
  }
}

Related searches

soft blue white paletteethereal cool colorsdelicate pastel bluescalm light blue schemeserene UI branding

Palette colors

Hex values

Color 1#CDE1EB
·
Color 2#E7F0F4
·
Color 3#B5D1E1
·
Color 4#A0BCCE
·
Color 5#D1E7F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.1:1Fail
2
1.2:1Fail
1.4:1Fail
1.7:1Fail
1.1:1Fail
3
1.2:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
4
1.5:1Fail
1.7:1Fail
1.2:1Fail
1.6:1Fail
5
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.6:1Fail

Similar palettes

More like Winter Glimmer

View all cool
Arctic Lake Ice
Alpine Frost Serenity
Arctic Glacier Chill
Arctic Serenity
Arctic Shoreline Chill
Arctic Shoreline Frost