Back to palettes

Palette

Urban Snow Drift

Captures the hushed beauty of a city blanketed in snow, with muted blues and grays.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Snow Drift 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 Urban Snow Drift.

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

Data visualization

#ECEFF1#CFD8DC#90A4AE#607D8B#455A64

Palette guide

How to use Urban Snow Drift

Overview

The Urban Snow Drift palette beautifully captures the serene, hushed atmosphere of a city blanketed in snow, offering a cohesive range of cool blues and greys. This collection includes the crisp lightness of #ECEFF1, the gentle depth of #CFD8DC, and the more pronounced cool tones of #90A4AE, #607D8B, and #455A64. It’s perfect for designs that aim to convey calm, clarity, and a touch of sophistication, much like a winter morning. Designers can leverage its harmonious progression for elegant user interfaces, tranquil branding, or any project seeking a clean, refreshing, and understated aesthetic. It provides a sense of quiet strength and modern sensibility.

Best used for

  • Winter-themed applications or websites
  • Travel blogs and tourism branding
  • Corporate or healthcare website interfaces
  • Interior design mood boards
  • Educational platforms requiring a calm aesthetic
  • Minimalist product design

Suggested color roles

primary

#455A64 - A deep, anchoring blue-grey, ideal for primary branding, large headings, or robust UI elements to establish a strong foundation.

secondary

#607D8B - A versatile mid-tone for subheadings, navigation, or card backgrounds, providing excellent readability and supporting the primary.

accent

#90A4AE - Use sparingly for subtle highlights, interactive states, or decorative lines to introduce a lighter, airy touch without overpowering.

background

#ECEFF1 - A very light, crisp background color that provides a clean canvas, reminiscent of fresh snow, making darker elements pop.

text

#455A64 or a dark charcoal for body text on lighter backgrounds, ensuring high readability. For dark backgrounds, #ECEFF1 or white offers clear contrast.

Accessibility notes

  • Ensure sufficient contrast between #455A64 text and #ECEFF1 background for WCAG AA compliance.
  • Avoid using #CFD8DC or #90A4AE for small text on #ECEFF1 backgrounds due to potential low contrast.
  • For interactive components, clearly distinguish states using a border or a subtle shade variation.
  • Always verify color combinations with a contrast checker, especially for essential UI elements and links.

Recommended combinations

Snowy Contrast

High-contrast pairing for main text, backgrounds, and a cool accent for highlights or icons.

#455A64 · #ECEFF1 · #90A4AE

Muted Blues

Creates a harmonious, layered blue-grey effect suitable for gradients, cards, or subtle UI sections.

#607D8B · #90A4AE · #CFD8DC

Urban Calm

A balanced scheme for professional interfaces, combining a strong anchor, light canvas, and a supportive mid-tone.

#455A64 · #ECEFF1 · #607D8B

CSS variables

:root {
  --urban-snow-drift-1: #ECEFF1;
  --urban-snow-drift-2: #CFD8DC;
  --urban-snow-drift-3: #90A4AE;
  --urban-snow-drift-4: #607D8B;
  --urban-snow-drift-5: #455A64;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-snow-drift": {
        1: "#ECEFF1",
        2: "#CFD8DC",
        3: "#90A4AE",
        4: "#607D8B",
        5: "#455A64",
      }
    }
  }
}

Related searches

cool grey palettewinter city colorscalm UI schememuted blue greyserene design palette

Palette colors

Hex values

Color 1#ECEFF1
·
Color 2#CFD8DC
·
Color 3#90A4AE
·
Color 4#607D8B
·
Color 5#455A64
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.2:1Fail
3.8:1AA18
6.3:1AA
2
1.3:1Fail
1.8:1Fail
3:1AA18
5:1AA
3
2.2:1Fail
1.8:1Fail
1.7:1Fail
2.8:1Fail
4
3.8:1AA18
3:1AA18
1.7:1Fail
1.7:1Fail
5
6.3:1AA
5:1AA
2.8:1Fail
1.7:1Fail

Similar palettes

More like Urban Snow Drift

View all cool
Arctic Tundra Bloom
Frost Branch Serene
Frozen Forest Dawn
Pavement Shimmer Gloom
Winter Dusk Embrace
Winter Forest Hues