Back to palettes

Palette

Winter Gloom

A stark monochrome transition, reflecting the deep shadows and muted light of the winter solstice.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#212121#424242#757575#BDBDBD#E0E0E0

Palette guide

How to use Winter Gloom

Overview

The Winter Gloom palette presents a stark, monochrome transition, capturing the deep shadows and muted light of the winter solstice. This collection ranges from the profound black #212121 to the soft gray #E0E0E0, offering a sophisticated and dramatic aesthetic. The versatile mid-tones like #424242 and #757575 provide excellent depth and contrast capabilities, making it ideal for designs that require a strong, modern, and serious tone. Designers can leverage this palette to craft impactful interfaces, sleek brand identities, or editorial layouts that communicate professionalism and a contemporary edge.

Best used for

  • Luxury automotive branding
  • Cybersecurity interfaces
  • Modern art galleries
  • High-end tech products
  • Dark mode UI themes
  • Photography portfolio sites

Suggested color roles

primary

Use #212121 for strong headers, primary calls to action, or core brand elements to establish a powerful, authoritative presence.

secondary

Ideal for subheadings, secondary buttons, or large content blocks using #424242, offering a sophisticated, deep gray.

accent

A versatile accent using #757575 for interactive elements, subtle highlights, or graphical details that need a softer edge.

background

Provides a very light gray canvas with #E0E0E0 that allows darker elements to stand out crisply, or use #212121 for a dark mode.

text

Excellent for main body text using #212121 on light backgrounds like #E0E0E0. For dark backgrounds, #E0E0E0 or #BDBDBD ensures readability.

Accessibility notes

  • Ensure #212121 text on #E0E0E0 background meets WCAG AAA contrast for optimal readability.
  • When using dark backgrounds (e.g., #212121), ensure text in #BDBDBD or #E0E0E0 has sufficient contrast.
  • Avoid low contrast pairings like #757575 text on #BDBDBD background for essential information.
  • Always verify contrast ratios for all text and interactive elements, especially in dark mode applications.

Recommended combinations

High Contrast

Classic dark text on light background, with a supporting dark gray for clear hierarchy.

#212121 · #E0E0E0 · #424242

Dark Mode Base

Ideal for dark mode interfaces, providing readable text and subtle distinctions.

#212121 · #BDBDBD · #757575

Gradient Depth

Creates a smooth, subtle gradient for backgrounds or layered elements, adding sophistication.

#424242 · #757575 · #BDBDBD

CSS variables

:root {
  --winter-gloom-1: #212121;
  --winter-gloom-2: #424242;
  --winter-gloom-3: #757575;
  --winter-gloom-4: #BDBDBD;
  --winter-gloom-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-gloom": {
        1: "#212121",
        2: "#424242",
        3: "#757575",
        4: "#BDBDBD",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

monochrome dark paletteblack and gray web designminimalist UI colorswinter dark mode themesophisticated gray branding

Palette colors

Hex values

Color 1#212121
·
Color 2#424242
·
Color 3#757575
·
Color 4#BDBDBD
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.5:1AA18
8.6:1AAA
12.2:1AAA
2
1.6:1Fail
2.2:1Fail
5.3:1AA
7.6:1AAA
3
3.5:1AA18
2.2:1Fail
2.5:1Fail
3.5:1AA18
4
8.6:1AAA
5.3:1AA
2.5:1Fail
1.4:1Fail
5
12.2:1AAA
7.6:1AAA
3.5:1AA18
1.4:1Fail

Similar palettes

More like Winter Gloom

View all monochrome
Noir Film Shadows
Shadowed Obsidian
Volcanic Glass Shards
Basalt Pillar Shades
Gothic Revival
Industrial Gear Grind