Back to palettes

Palette

Thunderstorm Grey

A cool and atmospheric range of greys, mirroring the heavy clouds of an impending storm.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Thunderstorm Grey 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 Thunderstorm Grey.

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

Data visualization

#2F3640#57606F#747D8C#A4B0BE#C8D6E5

Palette guide

How to use Thunderstorm Grey

Overview

The Thunderstorm Grey palette offers a cool, atmospheric monochromatic range, perfect for designs requiring a sense of calm strength or modern minimalism. From the deep #2F3640 to the light #C8D6E5, these greys evoke the subtle shifts of an impending storm. Designers can leverage #57606F for sophisticated backgrounds, while #A4B0BE serves as an excellent neutral for UI elements. Developers will find this palette provides robust options for creating clean interfaces, ensuring visual consistency across various components. The cool undertones make it ideal for tech, corporate, or conceptual branding projects seeking a composed and refined aesthetic.

Best used for

  • Modern corporate branding
  • Technology interface design
  • Luxury automotive websites
  • Minimalist architectural portfolios
  • Scientific data visualization
  • Contemporary art galleries

Suggested color roles

primary

Use #2F3640 as a strong, grounding color for main headings, navigation bars, or dominant brand elements.

secondary

Apply #57606F for subheadings, card backgrounds, or secondary information panels to add depth without overwhelming.

accent

Utilize #A4B0BE sparingly for subtle interactive elements, hover states, or to highlight key information with a soft touch.

background

Employ #C8D6E5 as a light, airy background for content areas, ensuring excellent readability and a clean aesthetic.

text

For primary text on lighter backgrounds like #C8D6E5, use #2F3640 or #57606F to ensure high contrast. #747D8C can be used for secondary or less critical text.

Accessibility notes

  • Ensure sufficient contrast between #A4B0BE and #C8D6E5 if used for text, as they are close in value.
  • Pair #2F3640 or #57606F with #C8D6E5 for body text to meet WCAG AA readability standards.
  • Consider using a darker grey for small text even on slightly contrasting backgrounds to maintain legibility.
  • Use distinct visual cues in addition to color variations for interactive elements to aid accessibility.

Recommended combinations

Core Contrast

Establishes a robust dark-on-light contrast for primary content, with a mid-tone for supportive elements.

#2F3640 · #C8D6E5 · #57606F

Subtle Depth

Creates a gentle, layered effect suitable for card components, subtle borders, or section dividers.

#57606F · #747D8C · #A4B0BE

Calm Interface

Provides a serene background with a clear hierarchy for text and important UI components.

#C8D6E5 · #747D8C · #2F3640

CSS variables

:root {
  --thunderstorm-grey-1: #2F3640;
  --thunderstorm-grey-2: #57606F;
  --thunderstorm-grey-3: #747D8C;
  --thunderstorm-grey-4: #A4B0BE;
  --thunderstorm-grey-5: #C8D6E5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "thunderstorm-grey": {
        1: "#2F3640",
        2: "#57606F",
        3: "#747D8C",
        4: "#A4B0BE",
        5: "#C8D6E5",
      }
    }
  }
}

Related searches

cool grey palettestormy grey colorsmonochromatic ui greyminimalist grey schememodern grey branding

Palette colors

Hex values

Color 1#2F3640
·
Color 2#57606F
·
Color 3#747D8C
·
Color 4#A4B0BE
·
Color 5#C8D6E5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.9:1Fail
5.5:1AA
8.2:1AAA
2
1.9:1Fail
1.5:1Fail
2.9:1Fail
4.3:1AA18
3
2.9:1Fail
1.5:1Fail
1.9:1Fail
2.8:1Fail
4
5.5:1AA
2.9:1Fail
1.9:1Fail
1.5:1Fail
5
8.2:1AAA
4.3:1AA18
2.8:1Fail
1.5:1Fail

Similar palettes

More like Thunderstorm Grey

View all monochrome
Charcoal Smoke Hues
City Twilight Mist
Gothic Cathedral Stone
Gothic Stone Hearth
Harvest Moon Dusk
Monochromatic Storm Sky