Back to palettes

Palette

Winter Solstice Night

Deep, somber blues and cool greys evoke the long, tranquil stillness 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 Winter Solstice Night 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 Night.

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

Data visualization

#191970#4682B4#A9A9A9#DCDCDC#000080

Palette guide

How to use Winter Solstice Night

Overview

The Winter Solstice Night palette evokes the deep, tranquil stillness of the longest night with its somber blues and cool grays. Anchored by two profound navies, #191970 (Midnight Blue) and #000080 (Navy), it features a contrasting steel blue #4682B4, and two versatile grays: #A9A9A9 (Dark Gray) and #DCDCDC (Gainsboro). This palette is excellent for designs requiring a serious, elegant, and sophisticated mood. It offers strong contrasts and a sense of depth, making it suitable for high-end branding, dark mode interfaces, or any project that benefits from a mysterious yet refined aesthetic.

Best used for

  • Luxury product websites or branding
  • Dark mode application themes
  • Evening event invitations or promotions
  • High-end corporate reports or presentations
  • Science fiction or fantasy game interfaces
  • Photography portfolios for night scenes

Suggested color roles

primary

#000080 provides a dominant, deep foundation for headers, strong brand elements, or backgrounds, conveying authority and depth.

secondary

#191970 works well for subheadings, secondary calls-to-action, or large text blocks, offering a slightly softer yet profound blue.

accent

#4682B4 can highlight interactive elements, small icons, or graphic details, providing a cool contrast against the darker blues.

background

#DCDCDC offers a light, neutral background for sections where readability is paramount, or as a contrasting element in a dark theme.

text

Use white or very light gray text on #000080 and #191970. For #DCDCDC, a dark charcoal or #191970 itself works well.

Accessibility notes

  • Ensure white text on #000080, #191970, and #4682B4 meets WCAG contrast standards for readability.
  • #A9A9A9 and #DCDCDC have low contrast with each other; use #DCDCDC primarily as a background for dark text.
  • Provide clear visual cues for interactive elements, as the dark palette might obscure subtle hover states.
  • Be mindful of color blindness when using #4682B4 against the darker blues, ensuring sufficient luminance contrast.

Recommended combinations

Midnight Contrast

Ideal for a dark mode interface with #DCDCDC for text and #4682B4 for accents.

#000080 · #DCDCDC · #4682B4

Deep Shadow

Great for sophisticated branding, with #A9A9A9 for secondary information and #4682B4 for highlights.

#191970 · #A9A9A9 · #4682B4

Solstice Twilight

Suitable for elegant print designs or a dark website footer, with #DCDCDC as light, readable text.

#000080 · #191970 · #DCDCDC

CSS variables

:root {
  --winter-solstice-night-1: #191970;
  --winter-solstice-night-2: #4682B4;
  --winter-solstice-night-3: #A9A9A9;
  --winter-solstice-night-4: #DCDCDC;
  --winter-solstice-night-5: #000080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-solstice-night": {
        1: "#191970",
        2: "#4682B4",
        3: "#A9A9A9",
        4: "#DCDCDC",
        5: "#000080",
      }
    }
  }
}

Related searches

dark blue gray palettemidnight winter colorselegant dark mode themecool night color schemesophisticated blue gray

Palette colors

Hex values

Color 1#191970
·
Color 2#4682B4
·
Color 3#A9A9A9
·
Color 4#DCDCDC
·
Color 5#000080
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.6:1AA18
6.3:1AA
10.8:1AAA
1.1:1Fail
2
3.6:1AA18
1.7:1Fail
3:1Fail
3.9:1AA18
3
6.3:1AA
1.7:1Fail
1.7:1Fail
6.8:1AA
4
10.8:1AAA
3:1Fail
1.7:1Fail
11.7:1AAA
5
1.1:1Fail
3.9:1AA18
6.8:1AA
11.7:1AAA

Similar palettes

More like Winter Solstice Night

View all dark
Deep Winter Solstice
Winter Moonlit Path
Celestial Deep Blue
City Neon Rain
Cosmic Night Bloom
Cosmic Night Veil