Palette

Winter Solstice

A progression of cool, deep blues evoking the quiet, introspective 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 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.

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

Data visualization

#1F2E3F#3F5E6F#608F9F#80AFBF#A0CFDF

Palette guide

How to use Winter Solstice

Overview

The Winter Solstice palette presents a serene progression of cool, deep blues, evoking the quiet, introspective beauty of the longest night of the year. With shades ranging from the profound #1F2E3F and #3F5E6F to the lighter, ethereal #608F9F, #80AFBF, and #A0CFDF, this palette is ideal for designers and developers seeking a sophisticated and deeply calming aesthetic. It’s perfect for creating immersive digital experiences, elegant branding, or editorial content that conveys depth, tranquility, and a touch of refined mystery. This collection promotes a meditative mood and a sense of quiet contemplation.

Best used for

Luxury spa or retreat websites
High-end corporate branding
Dark mode UI for sophisticated applications
Abstract art or photography portfolios
Meditation and mindfulness app interfaces
Winter-themed editorial content or publications

Suggested color roles

primary

Serves as a strong, anchoring base for main sections, headers, or dark mode backgrounds using #1F2E3F.

secondary

Provides a rich, supportive tone for significant content blocks or navigation with #3F5E6F.

accent

A subtle, sophisticated accent for interactive elements, highlights, or secondary calls-to-action with #608F9F.

background

Offers an airy, light backdrop that ensures readability and a spacious feel, especially against darker text, utilizing #A0CFDF.

text

Optimal for body text against lighter backgrounds, ensuring clear legibility and depth with #1F2E3F.

Accessibility notes

Ensure strong contrast for text using #1F2E3F or #3F5E6F against #80AFBF or #A0CFDF.
Avoid using lighter shades like #80AFBF and #A0CFDF for small text on similarly light backgrounds.
When using #608F9F for text, verify it has sufficient contrast against its background to meet WCAG AA standards.
For dark mode, pair lighter blues like #A0CFDF or #80AFBF for text on #1F2E3F or #3F5E6F backgrounds.

Recommended combinations

Solstice Depth

Creates a high-contrast, elegant theme for headers, impactful hero sections, or sophisticated branding.

#1F2E3F · #A0CFDF · #3F5E6F

Blue Progression

Ideal for smooth gradients, layered UI elements, or data visualizations that need a cohesive blue spectrum.

#3F5E6F · #608F9F · #80AFBF

Winter Light

Perfect for clean, open layouts where a light background is grounded by a distinct, readable dark text.

#A0CFDF · #80AFBF · #1F2E3F

CSS variables

:root {
  --winter-solstice-2-1: #1F2E3F;
  --winter-solstice-2-2: #3F5E6F;
  --winter-solstice-2-3: #608F9F;
  --winter-solstice-2-4: #80AFBF;
  --winter-solstice-2-5: #A0CFDF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-solstice-2": {
        1: "#1F2E3F",
        2: "#3F5E6F",
        3: "#608F9F",
        4: "#80AFBF",
        5: "#A0CFDF",
      }
    }
  }
}

Hex values

Color 1#1F2E3F

Color 2#3F5E6F

Color 3#608F9F

Color 4#80AFBF

Color 5#A0CFDF

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

5.8:1AA

8.2:1AAA

2:1Fail

1.9:1Fail

2.9:1Fail

4.1:1AA18

3.9:1AA18

1.9:1Fail

1.5:1Fail

2.1:1Fail

5.8:1AA

2.9:1Fail

1.5:1Fail

1.4:1Fail

8.2:1AAA

4.1:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Winter Solstice

Arctic Shoreline Chill

Arctic Shoreline Frost