Palette

Winter Sky Dusk

Captures the tranquil, fading light of a winter evening sky, offering a peaceful and cool embrace.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Sky Dusk 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 Sky Dusk.

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

Data visualization

#2E3A56#4A587A#7D8FA6#ADBBD2#CCDDEE

Palette guide

How to use Winter Sky Dusk

Overview

The Winter Sky Dusk palette beautifully captures the tranquil, fading light of a winter evening sky, offering a peaceful and cool embrace. This collection, featuring deep blues like #2E3A56 and #4A587A, alongside softer, frosty grays such as #7D8FA6, #ADBBD2, and the ethereal #CCDDEE, is ideal for designers and developers aiming for a serene and sophisticated aesthetic. It’s perfect for creating digital interfaces, branding, or editorial content that evokes calm, introspection, and understated elegance. The palette promotes a sense of quiet sophistication and a soothing visual experience, reminiscent of a frosty twilight.

Best used for

Wellness and meditation apps
Luxury travel or hospitality branding
Evening wear fashion websites
Astronomy or science-themed educational platforms
Elegant personal portfolio sites
Calm and serene home decor e-commerce

Suggested color roles

primary

Serves as a strong, grounding base for primary sections, headers, or dark mode themes using #2E3A56.

secondary

Excellent for supporting content blocks, navigation, or significant UI elements with #4A587A.

accent

A gentle accent for interactive elements, subtle highlights, or call-to-action buttons with #7D8FA6.

background

Provides an airy, light backdrop that enhances readability and spaciousness, utilizing #CCDDEE.

text

Optimal for body text against lighter backgrounds, ensuring clear legibility with #2E3A56.

Accessibility notes

Ensure strong contrast for text using #2E3A56 or #4A587A against #ADBBD2 or #CCDDEE.
When using #7D8FA6 for text, verify it has sufficient contrast against its background, especially lighter shades.
Avoid combining #ADBBD2 and #CCDDEE for text and background in critical areas due to low contrast.
For dark mode, use #ADBBD2 or #CCDDEE for text on #2E3A56 or #4A587A backgrounds for optimal readability.

Recommended combinations

Evening Depth

Creates a sophisticated, high-contrast theme for headers, footers, or impactful hero sections.

#2E3A56 · #CCDDEE · #4A587A

Frosty Layers

Ideal for layered backgrounds, subtle gradients, or organizing content with gentle visual separation.

#4A587A · #7D8FA6 · #ADBBD2

Sky Whisper

Perfect for clean, open layouts where a light background needs a grounding, readable dark text.

#CCDDEE · #ADBBD2 · #2E3A56

CSS variables

:root {
  --winter-sky-dusk-1: #2E3A56;
  --winter-sky-dusk-2: #4A587A;
  --winter-sky-dusk-3: #7D8FA6;
  --winter-sky-dusk-4: #ADBBD2;
  --winter-sky-dusk-5: #CCDDEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-sky-dusk": {
        1: "#2E3A56",
        2: "#4A587A",
        3: "#7D8FA6",
        4: "#ADBBD2",
        5: "#CCDDEE",
      }
    }
  }
}

Hex values

Color 1#2E3A56

Color 2#4A587A

Color 3#7D8FA6

Color 4#ADBBD2

Color 5#CCDDEE

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

5.8:1AA

8.2:1AAA

1.6:1Fail

2.1:1Fail

3.6:1AA18

5.1:1AA

3.4:1AA18

2.1:1Fail

1.7:1Fail

2.4:1Fail

5.8:1AA

3.6:1AA18

1.7:1Fail

1.4:1Fail

8.2:1AAA

5.1:1AA

2.4:1Fail

1.4:1Fail

Similar palettes

More like Winter Sky Dusk

Frosted Winter Branches

Frozen Crystal Grotto

Glacial Iceberg Flow