Palette

Storm Cloud Cascade

A gradient of deep to light greys, capturing the ominous beauty of an approaching storm.

Monochromedark5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Storm Cloud Cascade 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 Storm Cloud Cascade.

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

Data visualization

#4B4B4B#6A6A6A#9A9A9A#C8C8C8#E0E0E0

Palette guide

How to use Storm Cloud Cascade

Overview

The "Storm Cloud Cascade" palette offers a dramatic yet elegant monochromatic journey through shades of grey, mirroring the captivating beauty of an approaching storm. This gradient ranges from the deep, anchoring #4B4B4B to the soft, ethereal #E0E0E0, with balanced mid-tones like #6A6A6A, #9A9A9A, and #C8C8C8 providing smooth transitions. Designers and developers can leverage this palette to create sophisticated, moody, or minimalist interfaces and branding. It's particularly effective for designs requiring depth, visual calm, or a strong, understated presence, ensuring a cohesive and professional aesthetic across various applications.

Best used for

Dark mode UI themes
Photography portfolio websites
Luxury brand identity
Modern art gallery displays
Automotive industry branding
Elegant editorial layouts

Suggested color roles

primary

#4B4B4B serves as a strong, deep primary color for foundational elements, headers, or dark backgrounds.

secondary

Use #6A6A6A for secondary navigation, card backgrounds in dark mode, or subtle dividers, adding depth without harshness.

accent

#9A9A9A works well for interactive elements, icons, or subtle highlights that need to stand out gently against darker tones.

background

#E0E0E0 provides a light, clean background for standard interfaces, offering excellent contrast for darker text. Alternatively, #4B4B4B can be a dramatic dark background.

text

For dark backgrounds, #E0E0E0 offers excellent readability. For light backgrounds, #4B4B4B is ideal for body text.

Accessibility notes

Ensure #4B4B4B text on #E0E0E0 background meets WCAG AAA contrast.
Use #6A6A6A or darker for text on #C8C8C8 to maintain readability.
Avoid using #E0E0E0 or #C8C8C8 for small text on #9A9A9A as contrast may be insufficient.
For interactive elements, ensure sufficient contrast against their background, e.g., #6A6A6A buttons on #E0E0E0.

Recommended combinations

Dark Mode Base

Excellent for dark UI, with #4B4B4B as background, #E0E0E0 for text, and #6A6A6A for secondary elements.

#4B4B4B · #E0E0E0 · #6A6A6A

Light UI Contrast

Creates a clean, light interface with #E0E0E0 as background, #4B4B4B for text, and #9A9A9A for accents.

#E0E0E0 · #4B4B4B · #9A9A9A

Gradient Depth

Use for subtle background gradients or layered components to add visual depth.

#4B4B4B · #6A6A6A · #9A9A9A

CSS variables

:root {
  --storm-cloud-cascade-1: #4B4B4B;
  --storm-cloud-cascade-2: #6A6A6A;
  --storm-cloud-cascade-3: #9A9A9A;
  --storm-cloud-cascade-4: #C8C8C8;
  --storm-cloud-cascade-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "storm-cloud-cascade": {
        1: "#4B4B4B",
        2: "#6A6A6A",
        3: "#9A9A9A",
        4: "#C8C8C8",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#4B4B4B

Color 2#6A6A6A

Color 3#9A9A9A

Color 4#C8C8C8

Color 5#E0E0E0

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

5.2:1AA

6.6:1AA

1.6:1Fail

1.9:1Fail

3.2:1AA18

4.1:1AA18

3.1:1AA18

1.9:1Fail

1.7:1Fail

2.1:1Fail

5.2:1AA

3.2:1AA18

1.7:1Fail

1.3:1Fail

6.6:1AA

4.1:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Storm Cloud Cascade

View all Monochrome

Monsoon Cloud Sky

Tempest Cloud Soar

Abstract Urban Canvas

Aged Stone Reverie

Arctic Fox Camouflage

Asteroid Field Drift