Palette

Thunderhead Grays

A monochromatic study of deep to light grays, reflecting the powerful grandeur of a thunderhead cloud.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Thunderhead Grays 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 Thunderhead Grays.

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

Data visualization

#4F4F4F#696969#808080#A9A9A9#C0C0C0

Palette guide

How to use Thunderhead Grays

Overview

The Thunderhead Grays palette offers a sophisticated monochromatic range, perfect for creating deep, atmospheric designs. Featuring shades from the strong #4F4F4F to the lighter #C0C0C0, this collection provides excellent versatility for UI elements, sophisticated branding, and minimalist aesthetics. Developers will find these grays ideal for structuring layouts, providing subtle visual hierarchy, and ensuring consistent branding across various digital platforms. The mid-tone #808080 offers a balanced anchor, while #696969 adds depth. This palette is especially effective for projects requiring a sense of calm, professionalism, or understated elegance, providing a robust foundation for any design system.

Best used for

Corporate websites and branding
Minimalist UI designs
Photography portfolios
Backend dashboards and admin panels
Luxury product packaging
Architectural rendering presentations

Suggested color roles

primary

Use #4F4F4F as a dominant dark foundation for strong, grounded elements like main headers or large blocks.

secondary

Employ #696969 for subheadings, navigation elements, or panels that need to recede slightly from the primary.

accent

Apply #A9A9A9 sparingly for subtle highlights, interactive states, or to gently draw attention without harsh contrast.

background

Utilize #C0C0C0 as a light, neutral base for content areas, offering a soft canvas that supports darker text effectively.

text

For primary body text on light backgrounds like #C0C0C0, use #4F4F4F or #696969 to ensure excellent readability. Lighter grays like #A9A9A9 can be used for subtle secondary text.

Accessibility notes

Ensure sufficient contrast between text and background, especially when pairing lighter grays like #A9A9A9 with #C0C0C0.
Use #4F4F4F or #696969 for primary text on #C0C0C0 to meet WCAG AA contrast requirements.
Avoid using mid-tone grays like #808080 for small text on similar backgrounds; increase contrast for readability.
Provide visual cues beyond color alone for interactive elements, especially if using subtle gray changes for states.

Recommended combinations

Deep Contrast

Ideal for high-contrast text and background pairings, with a slightly lighter gray for secondary elements.

#4F4F4F · #C0C0C0 · #696969

Subtle Hierarchy

Creates gentle visual separation for card elements, subtle borders, or hover states in UI design.

#696969 · #808080 · #A9A9A9

Atmospheric Base

Establishes a moody background, balanced with a mid-tone and a lighter element for primary content.

#4F4F4F · #808080 · #C0C0C0

CSS variables

:root {
  --thunderhead-grays-1: #4F4F4F;
  --thunderhead-grays-2: #696969;
  --thunderhead-grays-3: #808080;
  --thunderhead-grays-4: #A9A9A9;
  --thunderhead-grays-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "thunderhead-grays": {
        1: "#4F4F4F",
        2: "#696969",
        3: "#808080",
        4: "#A9A9A9",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#696969

Color 3#808080

Color 4#A9A9A9

Color 5#C0C0C0

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

3.5:1AA18

4.5:1AA

1.5:1Fail

1.4:1Fail

2.3:1Fail

3:1AA18

2.1:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

3.5:1AA18

2.3:1Fail

1.7:1Fail

1.3:1Fail

4.5:1AA

3:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Thunderhead Grays

View all monochrome

Charcoal Smoke Hues

Gothic Cathedral Stone