Palette

Storm Cloud Surge

The imposing and dramatic hues of an approaching storm, from dark rumbles to clearing skies.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#708090#A9A9A9#DCDCDC

Palette guide

How to use Storm Cloud Surge

Overview

The "Storm Cloud Surge" palette is a dramatic and sophisticated collection that captures the imposing beauty of an approaching storm, blending deep, brooding tones with lighter, clearing skies. This collection moves from the intense blue-grey of #2F4F4F to the soft lightness of #DCDCDC, complemented by the solid mid-greys #696969 and #A9A9A9, and the cool #708090. Designers and developers will find this palette excellent for creating moody, robust, or elegant interfaces and branding that demand a strong visual presence. It's particularly effective for projects aiming to evoke a sense of depth, resilience, or understated power.

Best used for

Luxury automotive websites
High-end watch branding
Architectural visualization
Photography darkroom apps
Corporate financial services
Editorial design with a serious tone

Suggested color roles

primary

#2F4F4F serves as a powerful anchor, ideal for main backgrounds, large headers, or key structural elements in a dark theme.

secondary

Use #708090 for secondary navigation, card backgrounds, or significant content blocks to introduce a cool, stabilizing influence.

accent

#696969 provides a strong, neutral accent for interactive elements, icons, or subtle borders, offering good contrast.

background

#DCDCDC is an excellent light background color, offering crisp readability. For a dark background, #2F4F4F creates a dramatic effect.

text

For dark backgrounds, #DCDCDC or #A9A9A9 ensures clear text. For light backgrounds, #2F4F4F or #696969 provides strong, readable body text.

Accessibility notes

Ensure #2F4F4F text on #DCDCDC background meets WCAG AA/AAA contrast.
#A9A9A9 on #DCDCDC may not have sufficient contrast for small text; use for large text or accents only.
For interactive elements, ensure adequate contrast, e.g., #696969 buttons on #DCDCDC.
Text in #DCDCDC on #2F4F4F background offers excellent readability.

Recommended combinations

Dramatic Depth

Ideal for a dark UI theme: #2F4F4F as base, #DCDCDC for text, and #708090 for secondary elements.

#2F4F4F · #DCDCDC · #708090

Subtle Gradient

Creates a gentle, atmospheric gradient for backgrounds or layered effects in lighter designs.

#708090 · #A9A9A9 · #DCDCDC

Bold Accents

Use #DCDCDC as a clean background, #696969 for strong accents, and #2F4F4F for primary headings.

#DCDCDC · #696969 · #2F4F4F

CSS variables

:root {
  --storm-cloud-surge-1: #2F4F4F;
  --storm-cloud-surge-2: #696969;
  --storm-cloud-surge-3: #708090;
  --storm-cloud-surge-4: #A9A9A9;
  --storm-cloud-surge-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "storm-cloud-surge": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#708090",
        4: "#A9A9A9",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#696969

Color 3#708090

Color 4#A9A9A9

Color 5#DCDCDC

Accessibility

Contrast checker

1.6:1Fail

2.2:1Fail

3.8:1AA18

6.5:1AA

1.6:1Fail

1.4:1Fail

2.3:1Fail

4:1AA18

2.2:1Fail

1.4:1Fail

1.7:1Fail

3:1Fail

3.8:1AA18

2.3:1Fail

1.7:1Fail

6.5:1AA

4:1AA18

3:1Fail

1.7:1Fail

Similar palettes

More like Storm Cloud Surge

Storm Cloud Surge

See it in context.

Ready when you are.

Built with Storm Cloud Surge.

How to use Storm Cloud Surge

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dramatic Depth

Subtle Gradient

Bold Accents

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Storm Cloud Surge