Palette

Tempestuous Sky Fury

Intense, dramatic grays and deep blues evoke the raw power and dark beauty of a brewing storm.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tempestuous Sky Fury 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 Tempestuous Sky Fury.

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

Data visualization

#202E3E#3A4F5F#6B859D#3E3642#C6D3DE

Palette guide

How to use Tempestuous Sky Fury

Overview

The Tempestuous Sky Fury palette offers intense, dramatic grays and deep blues that evoke the raw power and dark beauty of a brewing storm. Featuring the commanding #202E3E and the rich #3A4F5F, it introduces a unique, muted purple-grey accent in #3E3642, alongside the atmospheric #6B859D and the airy #C6D3DE. This collection is ideal for designers and developers seeking a cinematic, sophisticated, and slightly mysterious aesthetic. Its cool, deep tones provide excellent depth and contrast, making it versatile for high-impact branding, immersive digital interfaces, and evocative visual storytelling across various platforms.

Best used for

Cinematic and film-related branding
Luxury and high-end product design
Editorial layouts with a dramatic flair
Web and app interfaces (especially dark mode)
Abstract digital art and illustration
Corporate communications seeking gravitas

Suggested color roles

primary

Utilize #202E3E as the deep, commanding primary color for backgrounds, headers, or core branding, establishing a powerful foundation.

secondary

Employ #3A4F5F for supportive sections, subheadings, or secondary navigation, providing strong visual continuity and depth.

accent

Apply #3E3642 for unique, subtle accents, interactive elements, or to add a touch of mysterious depth without overpowering.

background

Use #C6D3DE as a soft, light backdrop for main content, or #202E3E for an immersive, sophisticated dark mode experience.

text

For dark backgrounds like #202E3E, use #C6D3DE or a near-white. On lighter backgrounds such as #C6D3DE, use #202E3E or a dark charcoal for optimal contrast.

Accessibility notes

Ensure #C6D3DE text on #202E3E backgrounds meets WCAG AAA standards for optimal readability.
Be cautious when using #3E3642 for small text on #3A4F5F; verify contrast ratios carefully.
For long-form content on light backgrounds, a dark charcoal provides better readability and a softer aesthetic than pure black.
Always check contrast for interactive elements and links, especially when using similar tonal values.

Recommended combinations

Stormy Horizon

A powerful dark-light contrast with a strong mid blue-grey, excellent for creating clear hierarchy and visual impact in layouts.

#202E3E · #C6D3DE · #6B859D

Mysterious Depth

Creates a blend of dark blue-grey and purple-grey, suitable for layered backgrounds, abstract designs, or adding subtle intrigue.

#3A4F5F · #3E3642 · #6B859D

Subtle Drama

Combines the deepest tone with a unique accent and a light base, ideal for highlighting features or creating a sense of understated elegance.

#202E3E · #3E3642 · #C6D3DE

CSS variables

:root {
  --tempestuous-sky-fury-1: #202E3E;
  --tempestuous-sky-fury-2: #3A4F5F;
  --tempestuous-sky-fury-3: #6B859D;
  --tempestuous-sky-fury-4: #3E3642;
  --tempestuous-sky-fury-5: #C6D3DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tempestuous-sky-fury": {
        1: "#202E3E",
        2: "#3A4F5F",
        3: "#6B859D",
        4: "#3E3642",
        5: "#C6D3DE",
      }
    }
  }
}

Hex values

Color 1#202E3E

Color 2#3A4F5F

Color 3#6B859D

Color 4#3E3642

Color 5#C6D3DE

Accessibility

Contrast checker

1.6:1Fail

3.6:1AA18

1.2:1Fail

9.1:1AAA

1.6:1Fail

2.2:1Fail

1.4:1Fail

5.6:1AA

3.6:1AA18

2.2:1Fail

3:1AA18

2.5:1Fail

1.2:1Fail

1.4:1Fail

3:1AA18

7.6:1AAA

9.1:1AAA

5.6:1AA

2.5:1Fail

7.6:1AAA

Similar palettes

More like Tempestuous Sky Fury

View all dark

Stormy Night Embrace

Stormy Ocean Fury

City Puddle Reflection

Stormy Sea Abyss

Tempest Cloud Soar

Tempest Wave Crash