Palette

Tempest Cloud Shadow

Captures the ominous and dramatic hues of a brooding, tempestuous sky just before a storm.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tempest Cloud Shadow 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 Tempest Cloud Shadow.

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

Data visualization

#2F3E46#4C6472#7D92A0#B1C0CC#D4DCE2

Palette guide

How to use Tempest Cloud Shadow

Overview

The Tempest Cloud Shadow palette evokes the dramatic and brooding atmosphere of a stormy sky, offering a sophisticated range of cool grays and blue-grays. Anchored by the deep, foundational hue of #2F3E46, it transitions through the supportive mid-tone #4C6472 to lighter, ethereal shades like #B1C0CC and #D4DCE2. This collection is ideal for designers and developers aiming to convey a sense of depth, tranquility, or subtle intensity. Its versatility shines in both dark and light UI themes, allowing for atmospheric backgrounds and clear, readable text. The palette suggests a professional yet contemplative mood, perfect for projects requiring a touch of refined drama.

Best used for

Dark mode UI/UX design
Luxury brand identity
Editorial layouts and photography backdrops
Architectural visualization
Nature-inspired digital art
Corporate websites seeking sophistication

Suggested color roles

primary

Use #2F3E46 as the main foundational color for backgrounds, large headers, or primary branding elements, providing a deep, stable base.

secondary

Employ #4C6472 for secondary elements like subheadings, navigation bars, or panel backgrounds, offering a slightly softer yet equally substantial presence.

accent

Apply #7D92A0 or #B1C0CC for subtle accents, interactive states, or to highlight key information without overpowering the overall mood.

background

Utilize #D4DCE2 as a light, airy background for main content areas, or #2F3E46 for a rich, dark mode experience.

text

For dark backgrounds like #2F3E46, use #D4DCE2 or a near-white for optimal readability. On lighter backgrounds like #D4DCE2, use #2F3E46 or a dark charcoal.

Accessibility notes

Ensure sufficient contrast when using #D4DCE2 for text on #2F3E46 backgrounds to meet WCAG AA standards.
Be cautious with lighter shades like #B1C0CC on mid-tones such as #7D92A0 for small text or icons.
Prioritize darker text on lighter backgrounds for long-form content to enhance readability.
Always test color combinations with accessibility checkers, especially for interactive elements.

Recommended combinations

Deep Horizon

A classic dark-light contrast with a supportive mid-tone, excellent for headers, body text, and accents in web interfaces.

#2F3E46 · #D4DCE2 · #7D92A0

Stormy Gradient

Creates a smooth, atmospheric transition, perfect for gradients, layered backgrounds, or progressive disclosure elements.

#4C6472 · #7D92A0 · #B1C0CC

Subtle Depth

Pairs the deepest tone with a soft highlight and a mid-tone, ideal for adding depth and subtle visual interest to components.

#2F3E46 · #B1C0CC · #4C6472

CSS variables

:root {
  --tempest-cloud-shadow-1: #2F3E46;
  --tempest-cloud-shadow-2: #4C6472;
  --tempest-cloud-shadow-3: #7D92A0;
  --tempest-cloud-shadow-4: #B1C0CC;
  --tempest-cloud-shadow-5: #D4DCE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tempest-cloud-shadow": {
        1: "#2F3E46",
        2: "#4C6472",
        3: "#7D92A0",
        4: "#B1C0CC",
        5: "#D4DCE2",
      }
    }
  }
}

Hex values

Color 1#2F3E46

Color 2#4C6472

Color 3#7D92A0

Color 4#B1C0CC

Color 5#D4DCE2

Accessibility

Contrast checker

1.8:1Fail

3.4:1AA18

5.9:1AA

8:1AAA

1.8:1Fail

1.9:1Fail

3.3:1AA18

4.5:1AA18

3.4:1AA18

1.9:1Fail

1.7:1Fail

2.3:1Fail

5.9:1AA

3.3:1AA18

1.7:1Fail

1.3:1Fail

8:1AAA

4.5:1AA18

2.3:1Fail

1.3:1Fail

Similar palettes

More like Tempest Cloud Shadow

View all Dark

Stormy Lake Mist

Haunted Hallway Gloom