Palette

Winter Solstice Silence

Deep, hushed blues and greys capturing the profound stillness and chill of the winter solstice night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1E2E3A#3A4A5B#5C7A8B#8BADC1#141F2B

Palette guide

How to use Winter Solstice Silence

Overview

The Winter Solstice Silence palette captures the profound stillness and chill of the longest night with its deep, hushed blues and grays. Ranging from the almost black #141F2B and #1E2E3A to the lighter, cool gray-blue of #8BADC1, it provides a sophisticated and contemplative aesthetic. Intermediate shades like #3A4A5B and #5C7A8B offer smooth transitions and depth. This palette is ideal for designs that require a serious, minimalist, and elegant touch, perfect for conveying professionalism, tranquility, or a sense of mystery in branding, UI, or editorial content.

Best used for

High-end corporate websites or annual reports
Luxury watch or jewelry brand aesthetics
Dark mode UI themes for professional applications
Art gallery websites or exhibition collateral
Documentary film titles or promotional materials
Architectural visualization and design

Suggested color roles

primary

#141F2B serves as a powerful, deep foundation for dominant elements, strong brand presence, or backgrounds in a dark theme, conveying gravity and ultimate depth.

secondary

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

accent

#5C7A8B can highlight interactive elements, icons, or subtle graphical details, providing a cool, noticeable contrast.

background

#8BADC1 offers a lighter, serene background for sections requiring more visual breathing room, or as a contrasting panel.

text

Use white or very light gray (e.g., #EEEEEE) for text on #141F2B, #1E2E3A, and #3A4A5B. For #8BADC1, a dark charcoal or #1E2E3A works well.

Accessibility notes

Ensure high contrast for text on dark backgrounds, using white or very light gray for readability against #141F2B, #1E2E3A, and #3A4A5B.
#8BADC1 might require very dark text for optimal readability, especially for body copy.
Test interactive elements thoroughly to ensure hover and active states are distinct without relying solely on subtle color shifts.
The subtle differences between the darkest shades might be challenging for users with certain visual impairments; prioritize luminance contrast.

Recommended combinations

Deepest Night

Perfect for a sophisticated dark mode UI, with #8BADC1 for highlights or secondary information.

#141F2B · #3A4A5B · #8BADC1

Silent Hues

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

#1E2E3A · #5C7A8B · #8BADC1

Winter Depth

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

#141F2B · #5C7A8B · #3A4A5B

CSS variables

:root {
  --winter-solstice-silence-1: #1E2E3A;
  --winter-solstice-silence-2: #3A4A5B;
  --winter-solstice-silence-3: #5C7A8B;
  --winter-solstice-silence-4: #8BADC1;
  --winter-solstice-silence-5: #141F2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-solstice-silence": {
        1: "#1E2E3A",
        2: "#3A4A5B",
        3: "#5C7A8B",
        4: "#8BADC1",
        5: "#141F2B",
      }
    }
  }
}

Hex values

Color 1#1E2E3A

Color 2#3A4A5B

Color 3#5C7A8B

Color 4#8BADC1

Color 5#141F2B

Accessibility

Contrast checker

1.5:1Fail

3.1:1AA18

5.9:1AA

1.2:1Fail

1.5:1Fail

2:1Fail

3.8:1AA18

1.8:1Fail

3.1:1AA18

2:1Fail

1.9:1Fail

3.7:1AA18

5.9:1AA

3.8:1AA18

1.9:1Fail

7:1AAA

1.2:1Fail

1.8:1Fail

3.7:1AA18

7:1AAA

Similar palettes

More like Winter Solstice Silence