Palette

Winter Bloom Frost

The subtle, icy tones of delicate blossoms touched by a gentle winter frost.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0E8E8#C4D0D0#A6B8B8#88A0A0#6A8888

Palette guide

How to use Winter Bloom Frost

Overview

The "Winter Bloom Frost" palette is a delicate and serene collection of cool, muted greens and greys, inspired by the subtle beauty of frost-kissed winter flora. Ranging from the almost-white #E0E8E8 to the progressively deeper and more saturated #C4D0D0, #A6B8B8, #88A0A0, and the grounding #6A8888, this palette offers a harmonious gradient. It evokes a sense of calm, natural elegance and quiet sophistication, making it ideal for designs that aim for a soft, understated yet refined aesthetic. Designers can use these hues to create gentle transitions and a cohesive visual flow, while developers will find them perfect for clean, breathable interfaces that prioritize user comfort and a tranquil user experience.

Best used for

Wellness and spa branding
Nature-inspired websites
Minimalist app interfaces
Eco-friendly product packaging
Editorial design with a calming theme
Art and photography portfolios

Suggested color roles

primary

A balanced, muted green-grey #A6B8B8 that provides a calm and sophisticated base for main content areas or brand identity.

secondary

A slightly deeper, more prominent green-grey #88A0A0 for secondary sections, important headings, or interactive elements.

accent

The darkest shade #6A8888, ideal for subtle accents, icons, or to add grounding depth without overpowering the light aesthetic.

background

The lightest, almost white shade #E0E8E8, creating an airy and expansive canvas that enhances readability.

text

For primary body text, use the darkest shade #6A8888 or a dark charcoal to ensure excellent readability against lighter backgrounds.

Accessibility notes

Ensure #6A8888 text has sufficient contrast against #E0E8E8 and #C4D0D0 backgrounds.
Avoid using #E0E8E8 or #C4D0D0 text on mid-tone backgrounds like #A6B8B8 or #88A0A0 due to low contrast.
Check WCAG AA compliance for all interactive elements, particularly buttons and links.
Reserve lighter shades for large headings or graphic elements if used on slightly darker backgrounds.

Recommended combinations

Frosted Serenity

Lightest background, soft content block, and deep, readable text/accents.

#E0E8E8 · #C4D0D0 · #6A8888

Muted Harmony

Mid-tone primary, slightly darker secondary, and a light highlight/text.

#A6B8B8 · #88A0A0 · #E0E8E8

Deep Bloom

Dark background, light text/elements, and a mid-tone for subtle detail.

#6A8888 · #C4D0D0 · #88A0A0

CSS variables

:root {
  --winter-bloom-frost-1: #E0E8E8;
  --winter-bloom-frost-2: #C4D0D0;
  --winter-bloom-frost-3: #A6B8B8;
  --winter-bloom-frost-4: #88A0A0;
  --winter-bloom-frost-5: #6A8888;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-bloom-frost": {
        1: "#E0E8E8",
        2: "#C4D0D0",
        3: "#A6B8B8",
        4: "#88A0A0",
        5: "#6A8888",
      }
    }
  }
}

Hex values

Color 1#E0E8E8

Color 2#C4D0D0

Color 3#A6B8B8

Color 4#88A0A0

Color 5#6A8888

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.2:1Fail

3.1:1AA18

1.3:1Fail

1.8:1Fail

2.4:1Fail

1.7:1Fail

1.3:1Fail

1.9:1Fail

2.2:1Fail

1.8:1Fail

1.3:1Fail

1.4:1Fail

3.1:1AA18

2.4:1Fail

1.9:1Fail

1.4:1Fail

Similar palettes

More like Winter Bloom Frost

Winter Bloom Frost

See it in context.

Ready when you are.

Built with Winter Bloom Frost.

How to use Winter Bloom Frost

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Frosted Serenity

Muted Harmony

Deep Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Winter Bloom Frost