Palette

Deep Winter Solstice

Deep blues and purples evoking the silent beauty of a winter solstice night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B1B3A#1D3A5F#3C5A8A#6E89B8#A4BEE0

Palette guide

How to use Deep Winter Solstice

Overview

The Deep Winter Solstice palette captures the silent beauty of a winter solstice night with its progression of deep blues and purples. From the profound #0B1B3A and the rich #1D3A5F, it flows through the balanced #3C5A8A and the serene #6E89B8, culminating in the ethereal #A4BEE0. This dark, cold, and minimal collection is perfect for designers seeking to evoke tranquility, sophistication, and a touch of frosty elegance. Developers can leverage these hues for clean, modern UI designs, winter-themed branding, or any project that benefits from a calm, contemplative, and deeply aesthetic visual experience, offering a sense of quiet power.

Best used for

Winter holiday marketing (upscale)
Minimalist design portfolios
Technology or software branding
Astronomy or space-themed content
High-end corporate presentations
Calm and focused productivity apps

Suggested color roles

primary

#0B1B3A - The deepest, foundational blue, ideal for expansive backgrounds or dominant brand elements, conveying depth.

secondary

#1D3A5F - A rich, dark blue that works well for content panels, headers, or secondary navigational components.

accent

#A4BEE0 - A soft, luminous blue, perfect for interactive elements, highlights, or delicate graphical accents.

background

#3C5A8A - A balanced mid-tone blue that can serve as a versatile background for content sections, offering good contrast for lighter text.

text

#A4BEE0 - Highly recommended for primary text against darker shades like #0B1B3A or #1D3A5F to ensure excellent readability and a soft glow.

Accessibility notes

Text in #A4BEE0 against #0B1B3A, #1D3A5F, or #3C5A8A will generally meet WCAG AA contrast standards.
Avoid using #6E89B8 for text on #A4BEE0, as contrast will be insufficient for readability.
For critical information, especially in smaller type, consider using pure white text on the darkest backgrounds for maximum legibility.
Ensure interactive elements using #A4BEE0 are clearly distinguishable from adjacent lighter blues like #6E89B8.

Recommended combinations

Solstice Gradient

To create smooth, atmospheric background gradients or layered UI elements for a sense of depth.

#0B1B3A · #1D3A5F · #3C5A8A

Frosty Glow

Highlighting key information or interactive components, with #A4BEE0 providing a luminous focal point.

#1D3A5F · #A4BEE0 · #6E89B8

Winter Depth

Effective for clean branding or minimalist UI elements, offering a harmonious progression from deep to light blue.

#0B1B3A · #3C5A8A · #A4BEE0

CSS variables

:root {
  --deep-winter-solstice-1: #0B1B3A;
  --deep-winter-solstice-2: #1D3A5F;
  --deep-winter-solstice-3: #3C5A8A;
  --deep-winter-solstice-4: #6E89B8;
  --deep-winter-solstice-5: #A4BEE0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-winter-solstice": {
        1: "#0B1B3A",
        2: "#1D3A5F",
        3: "#3C5A8A",
        4: "#6E89B8",
        5: "#A4BEE0",
      }
    }
  }
}

Hex values

Color 1#0B1B3A

Color 2#1D3A5F

Color 3#3C5A8A

Color 4#6E89B8

Color 5#A4BEE0

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

4.8:1AA

8.9:1AAA

1.5:1Fail

1.7:1Fail

3.3:1AA18

6:1AA

2.5:1Fail

1.7:1Fail

2:1Fail

3.6:1AA18

4.8:1AA

3.3:1AA18

2:1Fail

1.9:1Fail

8.9:1AAA

6:1AA

3.6:1AA18

1.9:1Fail

Similar palettes

More like Deep Winter Solstice

View all dark

Deep Winter Storm

Winter Solstice Night

Winter Solstice Silence

Abyss Gaze

Abyssal Bioluminescent Glow

Abyssal Coral Glow