Palette

Winter Berry Frost

A crisp and refreshing palette, reflecting the delicate blues and whites of a frozen landscape.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#4682B4#1E90FF#B0C4DE

Palette guide

How to use Winter Berry Frost

Overview

The Winter Berry Frost palette is a crisp and refreshing collection of blues, reflecting the delicate hues of a frozen landscape. Featuring a light #ADD8E6, a vibrant #87CEEB, a strong #4682B4, and a dynamic #1E90FF, alongside the muted #B0C4DE. This palette is perfect for designers and developers aiming for a clean, fresh, and serene aesthetic. It excels in projects that demand clarity, spaciousness, and a modern feel, making it ideal for tech interfaces, wellness applications, outdoor adventure branding, or any design seeking a calm and invigorating visual experience.

Best used for

Fresh tech interfaces
Clean corporate branding
Wellness apps and websites
Outdoor adventure branding
Serene interior design concepts
Environmental awareness campaigns

Suggested color roles

primary

#4682B4 serves as a strong, reliable primary color, suitable for main branding elements and interactive components.

secondary

#87CEEB provides a brighter, more inviting secondary color for supporting visuals or softer accents.

accent

#1E90FF offers a vibrant, dynamic accent for key calls-to-action, notifications, or impactful highlights.

background

#ADD8E6 delivers a light, airy background, creating a sense of openness and freshness.

text

#1E90FF is suitable for distinctive headings or important text, while a standard black or dark charcoal provides optimal readability for body text on light backgrounds.

Accessibility notes

Ensure #1E90FF or a dark text color provides sufficient contrast on the #ADD8E6 background for all text.
Lighter blues like #87CEEB and #B0C4DE may not pass contrast requirements for small text; use for larger headings or decorative elements.
Always verify contrast ratios for interactive elements against their background in all states.
Avoid using similar light blues for text and background to prevent readability issues.

Recommended combinations

Clean Interface

Use #ADD8E6 as the main background, #4682B4 for main headings, and #1E90FF for interactive elements like buttons.

#ADD8E6 · #4682B4 · #1E90FF

Data Visualization

Apply #B0C4DE as a chart background, with #87CEEB and #4682B4 to differentiate data points or categories.

#B0C4DE · #87CEEB · #4682B4

Fresh CTA

Design a call-to-action button with #1E90FF background, #ADD8E6 text, and #4682B4 for a subtle border or icon.

#1E90FF · #ADD8E6 · #4682B4

CSS variables

:root {
  --winter-berry-frost-3-1: #ADD8E6;
  --winter-berry-frost-3-2: #87CEEB;
  --winter-berry-frost-3-3: #4682B4;
  --winter-berry-frost-3-4: #1E90FF;
  --winter-berry-frost-3-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-berry-frost-3": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#4682B4",
        4: "#1E90FF",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEEB

Color 3#4682B4

Color 4#1E90FF

Color 5#B0C4DE

Accessibility

Contrast checker

1.1:1Fail

2.7:1Fail

2.1:1Fail

1.2:1Fail

1.1:1Fail

2.4:1Fail

1.9:1Fail

1:1Fail

2.7:1Fail

2.4:1Fail

1.3:1Fail

2.3:1Fail

2.1:1Fail

1.9:1Fail

1.3:1Fail

1.8:1Fail

1.2:1Fail

1:1Fail

2.3:1Fail

1.8:1Fail

Similar palettes

More like Winter Berry Frost

View all cool

Winter Berry Chill

Winter Frost Bloom

Arctic Northern Bloom

Arctic Whisper

Frost Branch Serene

Frosted Berry Bush