Palette

Frosted Winterberry Glaze

Captures the crisp, frosty air and a hint of crimson from winter berries on an icy morning.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frosted Winterberry Glaze 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 Frosted Winterberry Glaze.

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

Data visualization

#EAEFF2#BFCCD6#7B9DA8#C44C5C#3A474D

Palette guide

How to use Frosted Winterberry Glaze

Overview

The Frosted Winterberry Glaze palette masterfully blends crisp, icy blues and greys with a striking pop of crimson, reminiscent of winter berries peeking through frost. From the airy #EAEFF2 and muted #BFCCD6 to the deep, grounding #3A474D, this palette creates a sophisticated cool base. The vibrant #C44C5C provides a crucial accent, injecting warmth and vitality. This combination is ideal for designers and developers seeking to create a balanced aesthetic that is both calm and engaging. It's particularly effective for branding, web design, or seasonal campaigns that require a touch of elegance with a memorable splash of color.

Best used for

Seasonal product packaging
Holiday marketing campaigns
Elegant e-commerce websites
Winter-themed event branding
Fashion or beauty editorial layouts
Cozy home decor inspiration

Suggested color roles

primary

Use #BFCCD6 as a dominant background or content color, providing a soft, cool, and inviting foundation.

secondary

Employ #7B9DA8 for supporting elements, sub-headers, or subtle UI components, adding a layer of sophisticated depth.

accent

Reserve #C44C5C for high-impact accents, call-to-action buttons, or critical information, ensuring strong visual appeal and warmth.

background

Utilize #EAEFF2 for clean, expansive backgrounds, offering a light, almost white canvas that allows other colors to stand out.

text

For optimal readability, use #3A474D for body text and headings on lighter backgrounds. For text on #3A474D, a crisp white or #EAEFF2 is recommended.

Accessibility notes

Ensure #C44C5C has sufficient contrast when used for text on backgrounds like #EAEFF2, though it's best suited as an accent.
The dark #3A474D provides excellent contrast for text on the lighter greys and blues, meeting WCAG standards.
Avoid using #BFCCD6 or #7B9DA8 for small text on very light backgrounds to prevent readability issues.
Always verify color contrast ratios for all text and interactive elements to ensure accessibility for all users.

Recommended combinations

Icy Base

Ideal for backgrounds and large content blocks, creating a cool, sophisticated, and neutral foundation.

#EAEFF2 · #BFCCD6 · #7B9DA8

Berry Pop

Excellent for call-to-action buttons, important notices, or branding elements, providing strong contrast and warmth.

#C44C5C · #EAEFF2 · #3A474D

Winter Depth

Suitable for navigation, card components, or section headers, offering clear hierarchy and a refined look.

#BFCCD6 · #3A474D · #7B9DA8

CSS variables

:root {
  --frosted-winterberry-glaze-1: #EAEFF2;
  --frosted-winterberry-glaze-2: #BFCCD6;
  --frosted-winterberry-glaze-3: #7B9DA8;
  --frosted-winterberry-glaze-4: #C44C5C;
  --frosted-winterberry-glaze-5: #3A474D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-winterberry-glaze": {
        1: "#EAEFF2",
        2: "#BFCCD6",
        3: "#7B9DA8",
        4: "#C44C5C",
        5: "#3A474D",
      }
    }
  }
}

Hex values

Color 1#EAEFF2

Color 2#BFCCD6

Color 3#7B9DA8

Color 4#C44C5C

Color 5#3A474D

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

4:1AA18

8.3:1AAA

1.4:1Fail

1.8:1Fail

2.8:1Fail

5.9:1AA

2.5:1Fail

1.8:1Fail

1.6:1Fail

3.3:1AA18