Palette

Winter Blossom Frost

Delicate and icy, like the fragile beauty of blossoms dusted with a crisp winter frost.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#E0FFFF#B0E0E6#87CEEB#ADD8E6

Palette guide

How to use Winter Blossom Frost

Overview

The "Winter Blossom Frost" palette is a crisp and delicate collection of cool blues, reminiscent of fragile blossoms dusted with winter's icy touch. It ranges from the pure, airy #F0F8FF and #E0FFFF, offering expansive white-blue bases, to the soft aqua of #B0E0E6 and #ADD8E6, culminating in the more pronounced sky blue of #87CEEB. This harmonious gradient creates a sense of serene tranquility and freshness, ideal for designs that require a clean, light, and refreshing aesthetic. Designers can leverage these hues for creating subtle depth and a cohesive visual flow, while developers will find them perfect for building clean, breathable interfaces, especially for projects aiming for a calm and sophisticated user experience.

Best used for

Spa and wellness websites
Cloud-based software interfaces
Baby product designs
Coastal-themed branding
Minimalist app layouts
Environmental awareness campaigns

Suggested color roles

primary

A soft, inviting aqua #B0E0E6 for main content areas, prominent headings, or brand elements that convey calm and purity.

secondary

A slightly lighter, more ethereal blue #ADD8E6 for secondary sections, subtle backgrounds, or dividing lines.

accent

A more vibrant sky blue #87CEEB for eye-catching accents, interactive states, or to add a refreshing pop of color.

background

The lightest, almost white shade #F0F8FF, providing a clean, expansive, and highly readable canvas for content.

text

For primary body text, a dark charcoal or a deep grey is recommended to ensure excellent readability against the very light backgrounds.

Accessibility notes

Most colors in this palette offer very low contrast with each other. Use a dark charcoal or black for text on all background colors.
Avoid using any of the palette colors for text on other palette colors, except for very large decorative text if contrast is specifically checked.
Ensure all interactive elements have clear visual states beyond just color, such as underlines or icons.
This palette is best used for large blocks of color, illustrations, or as backgrounds, with text in a highly contrasting dark neutral.

Recommended combinations

Icy Serenity

Lightest background, soft white-blue content, and a clear blue accent.

#F0F8FF · #E0FFFF · #87CEEB

Aqua Gradient

Mid-tone primary, slightly lighter secondary, and a very light accent/text.

#B0E0E6 · #ADD8E6 · #E0FFFF

Blossom Refresh

Vibrant blue element, airy background, and a soft aqua detail.

#87CEEB · #F0F8FF · #B0E0E6

CSS variables

:root {
  --winter-blossom-frost-1: #F0F8FF;
  --winter-blossom-frost-2: #E0FFFF;
  --winter-blossom-frost-3: #B0E0E6;
  --winter-blossom-frost-4: #87CEEB;
  --winter-blossom-frost-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-blossom-frost": {
        1: "#F0F8FF",
        2: "#E0FFFF",
        3: "#B0E0E6",
        4: "#87CEEB",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#E0FFFF

Color 3#B0E0E6

Color 4#87CEEB

Color 5#ADD8E6

Accessibility

Contrast checker

1:1Fail

1.3:1Fail

1.6:1Fail

1.4:1Fail

1:1Fail

1.4:1Fail

1.7:1Fail

1.4:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.6:1Fail

1.7:1Fail

1.2:1Fail

1.1:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Winter Blossom Frost

Winter Blossom Frost

See it in context.

Ready when you are.

Built with Winter Blossom Frost.

How to use Winter Blossom Frost

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Icy Serenity

Aqua Gradient

Blossom Refresh

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Winter Blossom Frost