Palette

Starlight Winter Night

Deep blues and icy whites evoke the profound calm and shimmering beauty of a clear, starry winter night sky.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Winter 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 Starlight Winter Night.

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

Data visualization

#1E2A3A#2A4F6A#B0C4DE#D8EBF4#1A1A1A

Palette guide

How to use Starlight Winter Night

Overview

The Starlight Winter Night palette evokes the profound calm and shimmering beauty of a clear, starry winter night sky. This cool and serene scheme features the deep, grounding #1A1A1A and #1E2A3A, transitioning to the rich #2A4F6A. The luminous #B0C4DE and the ethereal #D8EBF4 provide brilliant contrast, mimicking icy whites and distant starlight. Designers can leverage this palette to create tranquil and sophisticated digital experiences, perfect for elegant branding or serene applications. The clear progression from dark to light offers excellent versatility for establishing visual hierarchy and guiding user focus. Developers will find these hex codes ideal for crafting professional dark mode themes, elegant corporate websites, or serene nature-themed applications, ensuring a cohesive and visually pleasing experience.

Best used for

Winter-themed marketing campaigns
Luxury travel or outdoor adventure brands
Serene meditation or relaxation apps
Corporate websites seeking a calm, professional look
Photography portfolios for snowy landscapes
Elegant event branding during colder months

Suggested color roles

primary

Use #1A1A1A or #1E2A3A as a dominant dark base for headers, footers, or background sections, conveying stability and calm.

secondary

Apply #2A4F6A for secondary content blocks, navigation, or card backgrounds, offering a rich blue that supports the primary dark.

accent

Leverage #B0C4DE for interactive elements, call-to-action buttons, or key information, providing a clear yet subdued highlight.

background

The darkest shade, #1A1A1A, is excellent for a profound dark theme. For a lighter, airy background, #D8EBF4 provides a clean, cool base.

text

For text on #1A1A1A or #1E2A3A, use #D8EBF4 or #B0C4DE for optimal readability. On light backgrounds like #D8EBF4, a dark charcoal or black is recommended for text.

Accessibility notes

Ensure #D8EBF4 has sufficient contrast against #1A1A1A and #1E2A3A for body text, meeting WCAG AA standards.
Avoid using #B0C4DE on #2A4F6A for small text; check contrast ratios carefully to prevent readability issues.
For interactive elements, confirm that accent colors like #B0C4DE provide clear visual distinction against their surrounding background.
Consider increasing text size or using a bolder font weight for any text placed on mid-tone backgrounds like #2A4F6A.

Recommended combinations

Winter Depths

Ideal for creating layered backgrounds, data visualizations, or subtle gradients that convey depth and tranquility.

#1A1A1A · #1E2A3A · #2A4F6A

Starlit Frost

Excellent for clean UI elements, subtle highlights, or for text and icons on dark backgrounds in a winter theme.

#1A1A1A · #B0C4DE · #D8EBF4

Icy Contrast

Suitable for high-contrast text and background pairings, ensuring readability in professional interfaces.

#2A4F6A · #D8EBF4 · #B0C4DE

CSS variables

:root {
  --starlight-winter-night-1: #1E2A3A;
  --starlight-winter-night-2: #2A4F6A;
  --starlight-winter-night-3: #B0C4DE;
  --starlight-winter-night-4: #D8EBF4;
  --starlight-winter-night-5: #1A1A1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-winter-night": {
        1: "#1E2A3A",
        2: "#2A4F6A",
        3: "#B0C4DE",
        4: "#D8EBF4",
        5: "#1A1A1A",
      }
    }
  }
}

Hex values

Color 1#1E2A3A

Color 2#2A4F6A

Color 3#B0C4DE

Color 4#D8EBF4

Color 5#1A1A1A

Accessibility

Contrast checker

1.7:1Fail

8.1:1AAA

11.8:1AAA

1.2:1Fail

1.7:1Fail

4.9:1AA

7.1:1AAA

2:1Fail

8.1:1AAA

4.9:1AA

1.5:1Fail

9.8:1AAA

11.8:1AAA

7.1:1AAA

1.5:1Fail

14.2:1AAA

1.2:1Fail

2:1Fail

9.8:1AAA

14.2:1AAA

Similar palettes

More like Starlight Winter Night

View all cool

Frozen Night Sky

Tundra Edge Chill

Twilight Metropolis Blue

Winter Solstice Aura

Bioluminescent Abyss

Celestial Orb Glow