Back to palettes

Palette

Deep Winter Storm

Cool, deep blues and grays conveying the heavy, somber atmosphere of a stormy winter night.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C2A3A#3A4D64#5D7A9E#8FAAC9#BDE5F9

Palette guide

How to use Deep Winter Storm

Overview

The Deep Winter Storm palette conveys the heavy, somber atmosphere of a stormy winter night with its cool, deep blues and grays. From the foundational #1C2A3A and the rich #3A4D64, it progresses through the atmospheric #5D7A9E and the lighter #8FAAC9, culminating in the icy #BDE5F9. This dark, cold, and mysterious collection is perfect for designers seeking to evoke drama, introspection, and a sense of natural power. Developers can leverage these hues for impactful UI designs, winter-themed branding, or any project that benefits from a moody, sophisticated, and evocative visual experience, reflecting the raw beauty of a storm.

Best used for

  • Weather forecasting applications
  • Adventure or survival game interfaces
  • Dramatic film or documentary branding
  • Winter sports apparel marketing
  • Moody photography portfolios
  • Sophisticated dark mode UI designs

Suggested color roles

primary

#1C2A3A - The deepest, most dominant blue-grey, ideal for expansive backgrounds or foundational brand elements, conveying a somber mood.

secondary

#3A4D64 - A rich, dark blue-grey that works well for content panels, headers, or secondary navigational components.

accent

#BDE5F9 - A bright, icy blue, perfect for interactive elements, highlights, or crucial calls to action, providing a stark contrast.

background

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

text

#BDE5F9 - Highly recommended for primary text against darker shades like #1C2A3A or #3A4D64 to ensure excellent readability and an ethereal glow.

Accessibility notes

  • Text in #BDE5F9 against #1C2A3A, #3A4D64, or #5D7A9E will generally meet WCAG AA contrast standards.
  • Avoid using #8FAAC9 for text on #BDE5F9, 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 #BDE5F9 are clearly distinguishable from adjacent lighter blues like #8FAAC9.

Recommended combinations

Stormy Sky

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

#1C2A3A · #3A4D64 · #5D7A9E

Icy Contrast

Highlighting key information or interactive components, with #BDE5F9 providing a stark, icy focal point.

#3A4D64 · #BDE5F9 · #8FAAC9

Winter Chill

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

#1C2A3A · #5D7A9E · #BDE5F9

CSS variables

:root {
  --deep-winter-storm-1: #1C2A3A;
  --deep-winter-storm-2: #3A4D64;
  --deep-winter-storm-3: #5D7A9E;
  --deep-winter-storm-4: #8FAAC9;
  --deep-winter-storm-5: #BDE5F9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-winter-storm": {
        1: "#1C2A3A",
        2: "#3A4D64",
        3: "#5D7A9E",
        4: "#8FAAC9",
        5: "#BDE5F9",
      }
    }
  }
}

Related searches

deep winter blue palettestormy weather colorsmysterious blue brandingcold UI themewinter landscape palette

Palette colors

Hex values

Color 1#1C2A3A
·
Color 2#3A4D64
·
Color 3#5D7A9E
·
Color 4#8FAAC9
·
Color 5#BDE5F9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.3:1AA18
6.1:1AA
10.9:1AAA
2
1.7:1Fail
2:1Fail
3.6:1AA18
6.5:1AA
3
3.3:1AA18
2:1Fail
1.8:1Fail
3.3:1AA18
4
6.1:1AA
3.6:1AA18
1.8:1Fail
1.8:1Fail
5
10.9:1AAA
6.5:1AA
3.3:1AA18
1.8:1Fail

Similar palettes

More like Deep Winter Storm

View all dark
Deep Winter Solstice
Winter Moonlit Path
Winter Solstice Silence
Abyss Gaze
Abyss Glow Deep
Abyssal Biolume Shimmer