Palette

Monochromatic Storm Sky

Gradual shades of grey depicting the atmospheric shift before a powerful storm.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochromatic Storm Sky 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 Monochromatic Storm Sky.

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

Data visualization

#DCDCDC#C0C0C0#808080#696969#404040

Palette guide

How to use Monochromatic Storm Sky

Overview

The "Monochromatic Storm Sky" palette captures the dramatic and atmospheric essence of a gathering storm. This collection transitions from the bright promise of #DCDCDC to the deep, brooding #404040, including the balanced #C0C0C0, #808080, and #696969. It's perfect for designers and developers seeking to create designs with a sense of mood, depth, and sophistication. The gradual shift in grey tones allows for compelling visual hierarchies and emotional resonance, making it suitable for projects that require a touch of drama, seriousness, or cool elegance. Explore this palette for impactful and memorable visual experiences.

Best used for

Dramatic website themes
Photography portfolios (dark mode)
Luxury product branding
Film and media production sites
Artistic and conceptual design projects
Weather-related applications

Suggested color roles

primary

Use #404040 as a dominant background or for strong headers, anchoring the design with a deep, serious tone.

secondary

Apply #696969 for secondary panels, navigation, or card backgrounds, offering a slightly lighter yet substantial presence.

accent

Utilize #DCDCDC or #C0C0C0 for highlights, interactive elements, or subtle graphic details to create contrast and focus.

background

Employ #808080 or #696969 for main content areas in a darker theme, or #DCDCDC for a lighter, airy feel.

text

For dark backgrounds, use #DCDCDC or #C0C0C0 for body text. For lighter backgrounds like #DCDCDC, use #404040 or #696969.

Accessibility notes

Ensure high contrast between #404040 text and #DCDCDC backgrounds for readability.
Avoid using #808080 text on #696969 backgrounds for small text due to insufficient contrast.
When using #DCDCDC as text on a darker background, verify it meets WCAG AA standards.
Test all text-background pairings, especially for interactive elements, to ensure usability.

Recommended combinations

Dark & Moody

Ideal for a dark mode, with a deep background (#404040), bright text (#DCDCDC), and secondary elements (#696969).

#404040 · #DCDCDC · #696969

Atmospheric Layers

Creates subtle depth, perfect for layered UI components where #808080 is a base, #C0C0C0 an overlay, and #DCDCDC a highlight.

#808080 · #C0C0C0 · #DCDCDC

Sharp Contrast

Use #404040 for headers, #808080 for subheadings, and #DCDCDC for body text on a very dark background to ensure clarity.

#404040 · #808080 · #DCDCDC

CSS variables

:root {
  --monochromatic-storm-sky-1: #DCDCDC;
  --monochromatic-storm-sky-2: #C0C0C0;
  --monochromatic-storm-sky-3: #808080;
  --monochromatic-storm-sky-4: #696969;
  --monochromatic-storm-sky-5: #404040;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochromatic-storm-sky": {
        1: "#DCDCDC",
        2: "#C0C0C0",
        3: "#808080",
        4: "#696969",
        5: "#404040",
      }
    }
  }
}

Hex values

Color 1#DCDCDC

Color 2#C0C0C0

Color 3#808080

Color 4#696969

Color 5#404040

Accessibility

Contrast checker

1.3:1Fail

2.9:1Fail

4:1AA18

7.6:1AAA

1.3:1Fail

2.2:1Fail

3:1AA18

5.7:1AA

2.9:1Fail

2.2:1Fail

1.4:1Fail

2.6:1Fail

4:1AA18

3:1AA18

1.4:1Fail

1.9:1Fail

7.6:1AAA

5.7:1AA

2.6:1Fail

1.9:1Fail

Similar palettes

More like Monochromatic Storm Sky