Palette

Winter Berry Glaze

Cool blues and rich berry tones mimic the frosted elegance of cranberries and plums on a crisp winter's morning.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9DC1D8#7D263B#5E3E77#EAF4F4#BCCCDD

Palette guide

How to use Winter Berry Glaze

Overview

This "Winter Berry Glaze" palette offers a sophisticated blend of cool blues and rich berry tones, perfect for creating serene yet impactful designs. The soft, ethereal light blue (#EAF4F4) provides a crisp foundation, while the muted sky blue (#BCCCDD) and a deeper, more pronounced blue (#9DC1D8) add layers of cool elegance. Contrasting these are the deep, warm berry hues: a rich cranberry (#7D263B) and a mysterious plum purple (#5E3E77). This combination evokes the frosted beauty of winter mornings, making it ideal for projects requiring a balance of tranquility and subtle vibrancy. Developers will find these distinct shades easy to implement for UI elements, branding, or digital art, ensuring visual harmony across various platforms. The palette's depth allows for versatile application, from soft backgrounds to striking call-to-action elements.

Best used for

Winter-themed branding
Elegant website headers
Holiday greeting cards
Cozy app interfaces
Editorial design for lifestyle blogs
Event invitations

Suggested color roles

primary

Ideal for main sections or large blocks, providing a calm and inviting base. Pairs well with lighter backgrounds and darker text using #9DC1D8.

secondary

Use this rich berry #7D263B for key interactive elements, important headings, or visual accents that need to stand out with warmth.

accent

A deep, sophisticated accent #5E3E77 for hover states, subtle illustrations, or distinctive call-to-action buttons.

background

Provides a clean, frosted canvas for content, ensuring high readability and a serene overall feel with #EAF4F4.

text

For primary body text, consider a dark charcoal or the deep berry #7D263B for headings against lighter backgrounds like #EAF4F4.

Accessibility notes

Ensure #7D263B and #5E3E77 have sufficient contrast against #EAF4F4 for body text.
Use #EAF4F4 or #BCCCDD as backgrounds for #7D263B and #5E3E77 text to meet WCAG AA standards.
Avoid placing #9DC1D8 text directly on #BCCCDD background without checking contrast ratios.
Reserve #EAF4F4 for very large text or UI elements if used on darker colors like #7D263B due to low contrast.

Recommended combinations

Frosted Elegance

Light background, soft header, striking call-to-action.

#EAF4F4 · #BCCCDD · #7D263B

Deep Winter

Primary section, deep accent, light text or icon.

#9DC1D8 · #5E3E77 · #EAF4F4

Berry Contrast

Bold background, light text, subtle highlight.

#7D263B · #EAF4F4 · #5E3E77

CSS variables

:root {
  --winter-berry-glaze-2-1: #9DC1D8;
  --winter-berry-glaze-2-2: #7D263B;
  --winter-berry-glaze-2-3: #5E3E77;
  --winter-berry-glaze-2-4: #EAF4F4;
  --winter-berry-glaze-2-5: #BCCCDD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-berry-glaze-2": {
        1: "#9DC1D8",
        2: "#7D263B",
        3: "#5E3E77",
        4: "#EAF4F4",
        5: "#BCCCDD",
      }
    }
  }
}

Hex values

Color 1#9DC1D8

Color 2#7D263B

Color 3#5E3E77

Color 4#EAF4F4

Color 5#BCCCDD

Accessibility

Contrast checker

5:1AA

4.5:1AA

1.7:1Fail

1.2:1Fail

5:1AA

1.1:1Fail

8.5:1AAA

5.8:1AA

4.5:1AA

1.1:1Fail

7.7:1AAA

5.3:1AA

1.7:1Fail

8.5:1AAA

7.7:1AAA

1.5:1Fail

1.2:1Fail

5.8:1AA

5.3:1AA

1.5:1Fail

Similar palettes

More like Winter Berry Glaze

View all cool

Frosted Berry Grove

Frosted Berry Patch

Frosted Berry Sparkle

Frosted Berry Winter

Arctic Whisper

Berry Glaze Frost