Palette

Winter Shadow Dance

Subtly chilling, reflecting the long, delicate shadows cast on a crisp winter's day.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Shadow Dance 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 Shadow Dance.

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

Data visualization

#2A3B4C#4C6F8E#8FAFC8#C4DDEB#D0DDE5

Palette guide

How to use Winter Shadow Dance

Overview

The Winter Shadow Dance palette captures the subtle, chilling beauty of long shadows on a crisp winter's day. This serene collection of cool blues and grays, including the deep #2A3B4C, the rich #4C6F8E, the soft #8FAFC8, the delicate #C4DDEB, and the muted #D0DDE5, offers designers and developers a sophisticated range for creating elegant, understated digital experiences. It's ideal for projects that require a sense of depth, tranquility, and a touch of mysterious calm without being overtly dark. Use these shades to evoke a sophisticated, modern aesthetic in web design, branding, or editorial layouts, promoting a feeling of quiet contemplation.

Best used for

Luxury brand websites or applications
Professional corporate identities
Editorial design for high-end magazines
Winter fashion lookbooks
Photography portfolios or art gallery sites
Meditation or mindfulness app interfaces

Suggested color roles

primary

Provides a strong, anchoring presence for main sections or prominent UI elements using #2A3B4C.

secondary

Excellent for sub-sections, card backgrounds, or prominent graphic elements with #4C6F8E.

accent

Use for interactive elements, highlights, or subtle calls-to-action with #8FAFC8.

background

A light, airy canvas that ensures good readability and a spacious feel, utilizing #D0DDE5.

text

Ideal for body text against lighter backgrounds, offering strong contrast with #2A3B4C.

Accessibility notes

Ensure high contrast for text using #2A3B4C or #4C6F8E against #C4DDEB or #D0DDE5.
Avoid using lighter shades like #C4DDEB and #D0DDE5 for small text elements against similar backgrounds.
Pair #8FAFC8 with a darker color like #2A3B4C for accessible button states or links.
Maintain sufficient contrast between interactive elements and their surrounding content, especially with the subtle blues.

Recommended combinations

Deep Calm

Establishes a sophisticated, high-contrast look for professional websites or branding.

#2A3B4C · #D0DDE5 · #4C6F8E

Subtle Layers

Creates a harmonious gradient or layered effect for backgrounds, data visualizations, or UI elements.

#4C6F8E · #8FAFC8 · #C4DDEB

Frosty Touch

Perfect for clean, airy designs where a light background needs a strong, grounding text color.

#C4DDEB · #D0DDE5 · #2A3B4C

CSS variables

:root {
  --winter-shadow-dance-1: #2A3B4C;
  --winter-shadow-dance-2: #4C6F8E;
  --winter-shadow-dance-3: #8FAFC8;
  --winter-shadow-dance-4: #C4DDEB;
  --winter-shadow-dance-5: #D0DDE5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-shadow-dance": {
        1: "#2A3B4C",
        2: "#4C6F8E",
        3: "#8FAFC8",
        4: "#C4DDEB",
        5: "#D0DDE5",
      }
    }
  }
}

Hex values

Color 1#2A3B4C

Color 2#4C6F8E

Color 3#8FAFC8

Color 4#C4DDEB

Color 5#D0DDE5

Accessibility

Contrast checker

2.2:1Fail

5:1AA

8.1:1AAA

8.3:1AAA

2.2:1Fail

2.3:1Fail

3.7:1AA18

3.8:1AA18

5:1AA

2.3:1Fail

1.6:1Fail

1.7:1Fail

8.1:1AAA

3.7:1AA18

1.6:1Fail

1:1Fail

8.3:1AAA

3.8:1AA18

1.7:1Fail

1:1Fail

Similar palettes

More like Winter Shadow Dance

Frozen Crystal Grotto

Glacial Iceberg Flow

Nordic Winter Calm