Back to palettes

Palette

Winter Solstice

Deep, frosty blues and greys embodying the stark, serene beauty of the longest night.

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

#0D1D2D#2F4858#536A7A#7A8C9B#A4B1BE

Palette guide

How to use Winter Solstice

Overview

The Winter Solstice palette embodies the stark, serene beauty of the longest night with its deep, frosty blues and grays. Anchored by the profound darkness of #0D1D2D, it offers a harmonious progression through #2F4858, #536A7A, and #7A8C9B, culminating in the lighter, contemplative #A4B1BE. This palette is exceptionally well-suited for designs that require a serious, elegant, and sophisticated mood, perfect for conveying professionalism, tranquility, or a sense of introspective depth. It provides excellent contrast and a rich visual texture for both dark mode interfaces and high-end branding.

Best used for

  • Luxury automotive or tech branding
  • Dark mode interfaces for creative applications
  • High-end editorial design for art or culture magazines
  • Architectural and interior design portfolios
  • Financial services websites seeking a trustworthy feel
  • Online platforms for contemplative content or mindfulness

Suggested color roles

primary

#0D1D2D serves as a powerful, deep foundation for dominant elements, strong brand presence, or backgrounds in a dark theme, conveying ultimate depth.

secondary

#2F4858 works well for subheadings, large text blocks, or secondary containers, offering a slightly softer yet equally profound dark tone.

accent

#536A7A can highlight interactive elements, icons, or subtle graphical details, providing a cool, noticeable contrast without being vibrant.

background

#A4B1BE offers a lighter, serene background for sections requiring more visual breathing room, or as a contrasting panel in a dark layout.

text

Use white or very light gray (e.g., #EEEEEE) for text on #0D1D2D, #2F4858, and #536A7A. For #A4B1BE, a dark charcoal or #2F4858 works well.

Accessibility notes

  • Ensure white or light gray text on #0D1D2D, #2F4858, and #536A7A meets WCAG contrast standards for readability.
  • #7A8C9B and #A4B1BE have low contrast with each other; avoid using them together for essential text.
  • Provide clear focus states for interactive elements, as the palette's subtlety might make small changes hard to perceive.
  • The subtle differences between the darkest shades might be challenging for users with certain visual impairments; prioritize luminance contrast.

Recommended combinations

Deep Contemplation

Excellent for a sophisticated dark mode UI, with #A4B1BE for highlights or secondary information.

#0D1D2D · #2F4858 · #A4B1BE

Frosted Depths

Great for elegant branding or layered content, offering depth and clarity.

#2F4858 · #536A7A · #7A8C9B

Silent Night

Suitable for creating a strong visual hierarchy in reports or presentations, with good contrast.

#0D1D2D · #7A8C9B · #536A7A

CSS variables

:root {
  --winter-solstice-1: #0D1D2D;
  --winter-solstice-2: #2F4858;
  --winter-solstice-3: #536A7A;
  --winter-solstice-4: #7A8C9B;
  --winter-solstice-5: #A4B1BE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-solstice": {
        1: "#0D1D2D",
        2: "#2F4858",
        3: "#536A7A",
        4: "#7A8C9B",
        5: "#A4B1BE",
      }
    }
  }
}

Related searches

deep blue gray palettecold contemplative colorssophisticated winter designdark cool UI themeicy serene color scheme

Palette colors

Hex values

Color 1#0D1D2D
·
Color 2#2F4858
·
Color 3#536A7A
·
Color 4#7A8C9B
·
Color 5#A4B1BE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3:1AA18
4.9:1AA
7.8:1AAA
2
1.8:1Fail
1.7:1Fail
2.8:1Fail
4.4:1AA18
3
3:1AA18
1.7:1Fail
1.6:1Fail
2.6:1Fail
4
4.9:1AA
2.8:1Fail
1.6:1Fail
1.6:1Fail
5
7.8:1AAA
4.4:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Winter Solstice

View all cool
Arctic Aurora Glow
Arctic Dusk Glow
Frosted Winter Lake
Nordic Winter Sky
Winter Chill Vista
Winter Solstice