Palette

Deep Winter Silence

Chilling whites, grays, and soft blues depicting the profound, still quiet of a deep winter landscape.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#DCDCDC#B0C4DE#778899#696969

Palette guide

How to use Deep Winter Silence

Overview

The Deep Winter Silence palette captures the profound, still quiet of a deep winter landscape with its chilling whites, grays, and soft blues. From the ethereal #F0F8FF and cool #DCDCDC to the serene #B0C4DE, it deepens into the muted #778899 and the grounding #696969. This calm and monochrome collection is perfect for designers seeking to evoke tranquility, clarity, and minimalist elegance. Developers can leverage these hues for clean, sophisticated UI designs, winter-themed branding, or any project that benefits from a serene, uncluttered aesthetic, offering a refreshing and peaceful visual experience.

Best used for

Winter-themed marketing campaigns
Minimalist website designs
Spa or wellness brand identities
Photography portfolio websites
Clean, professional corporate materials
Climate or environmental awareness projects

Suggested color roles

primary

#F0F8FF - A crisp, almost white base, ideal for expansive backgrounds or main content areas, conveying purity.

secondary

#B0C4DE - A soft, cool blue-grey, perfect for content sections, subtle headers, or secondary navigational elements.

accent

#778899 - A muted, grounding grey-blue, excellent for interactive elements, subtle highlights, or important text.

background

#DCDCDC - A light, neutral grey that provides a versatile base for content, allowing other colors to subtly pop.

text

#696969 - Recommended for primary text against lighter backgrounds like #F0F8FF or #DCDCDC to ensure excellent readability and a soft contrast.

Accessibility notes

Text in #696969 against #F0F8FF or #DCDCDC provides good contrast, generally meeting WCAG AA standards.
Avoid using #778899 for text on #B0C4DE without careful contrast checking; it might be insufficient for smaller text.
When using #B0C4DE for text on #F0F8FF, ensure the text is large or bold enough for readability.
For critical information, a darker charcoal or black text might be necessary for maximum legibility on the lightest backgrounds.

Recommended combinations

Snowy Layers

To create soft, layered backgrounds or subtle distinctions between light content blocks.

#F0F8FF · #DCDCDC · #B0C4DE

Winter Accent

Highlighting key information or interactive components, with #778899 providing a gentle focal point.

#DCDCDC · #778899 · #696969

Calm Progression

Effective for clean branding or minimalist UI elements, offering a harmonious progression from light to dark.

#F0F8FF · #B0C4DE · #696969

CSS variables

:root {
  --deep-winter-silence-1: #F0F8FF;
  --deep-winter-silence-2: #DCDCDC;
  --deep-winter-silence-3: #B0C4DE;
  --deep-winter-silence-4: #778899;
  --deep-winter-silence-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-winter-silence": {
        1: "#F0F8FF",
        2: "#DCDCDC",
        3: "#B0C4DE",
        4: "#778899",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#DCDCDC

Color 3#B0C4DE

Color 4#778899

Color 5#696969

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

3.4:1AA18

5.1:1AA

1.3:1Fail

2.7:1Fail

4:1AA18

1.7:1Fail

1.3:1Fail

2:1Fail

3.1:1AA18

3.4:1AA18

2.7:1Fail

2:1Fail

1.5:1Fail

5.1:1AA

4:1AA18

3.1:1AA18

1.5:1Fail

Similar palettes

More like Deep Winter Silence

Deep Winter Silence

See it in context.

Ready when you are.

Built with Deep Winter Silence.

How to use Deep Winter Silence

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Snowy Layers

Winter Accent

Calm Progression

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Deep Winter Silence