Palette

Winter Solstice Chill

Frosty blues and serene grays, capturing the quiet, stark beauty of the winter solstice.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Solstice Chill 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 Solstice Chill.

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

Data visualization

#191970#4682B4#B0C4DE#DCDCDC#E6E6FA

Palette guide

How to use Winter Solstice Chill

Overview

The Winter Solstice Chill palette offers a serene and icy aesthetic, perfect for designs requiring a calm, contemplative mood. Featuring deep navy blue (#191970) as its anchor, it transitions through a cool steel blue (#4682B4) and a soft periwinkle (#B0C4DE). Lighter tones like the subtle silver of #DCDCDC and the near-white #E6E6FA complete this collection, evoking frosty landscapes and crisp winter air. This palette is ideal for creating elegant, minimalist interfaces or branding that conveys tranquility and sophistication. Designers can leverage its cool gradient for depth, while developers will find the distinct contrast useful for defining UI elements without harshness.

Best used for

Luxury winter-themed branding
Serene spa or wellness website designs
Minimalist UI themes for productivity apps
Editorial layouts for winter fashion or travel
Digital art and illustration evoking cold landscapes
Event invitations for elegant winter gatherings

Suggested color roles

primary

#191970 for strong headers, primary calls-to-action, or dominant brand elements, providing a deep, stable foundation.

secondary

#4682B4 works well for subheadings, active navigation states, or graphical accents that need a distinct cool presence.

accent

#B0C4DE can highlight interactive elements, small icons, or subtle decorative features, offering a gentle pop.

background

#E6E6FA provides a clean, airy canvas for content, ensuring readability and a light, open feel.

text

Use #191970 for main body text on light backgrounds like #E6E6FA, or a crisp white for text on darker backgrounds like #191970.

Accessibility notes

Ensure sufficient contrast when pairing #191970 with #4682B4 or #B0C4DE for text.
#DCDCDC might have insufficient contrast against #E6E6FA for small text; use for larger headings or non-textual elements.
Always test color combinations for readability, especially for users with visual impairments.
For interactive elements, provide additional visual cues beyond color, such as underlines or icons.

Recommended combinations

Icy Depths

Ideal for dark mode interfaces or sophisticated branding, with #DCDCDC as light text/icon.

#191970 · #4682B4 · #DCDCDC

Frosty Morning

Excellent for a light, airy website background with interactive elements and subtle highlights.

#E6E6FA · #B0C4DE · #4682B4

Winter Elegance

Suitable for high-contrast text and background, with #B0C4DE as a soft accent.

#191970 · #B0C4DE · #DCDCDC

CSS variables

:root {
  --winter-solstice-chill-1: #191970;
  --winter-solstice-chill-2: #4682B4;
  --winter-solstice-chill-3: #B0C4DE;
  --winter-solstice-chill-4: #DCDCDC;
  --winter-solstice-chill-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-solstice-chill": {
        1: "#191970",
        2: "#4682B4",
        3: "#B0C4DE",
        4: "#DCDCDC",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4682B4

Color 3#B0C4DE

Color 4#DCDCDC

Color 5#E6E6FA

Accessibility

Contrast checker

3.6:1AA18

8.3:1AAA

10.8:1AAA

12.1:1AAA

3.6:1AA18

2.3:1Fail

3:1Fail

3.3:1AA18

8.3:1AAA

2.3:1Fail

1.3:1Fail

1.4:1Fail

10.8:1AAA

3:1Fail

1.3:1Fail

1.1:1Fail

12.1:1AAA

3.3:1AA18

1.4:1Fail

1.1:1Fail

Similar palettes

More like Winter Solstice Chill

Arctic Glacier Lagoon

Frost Kissed Pine