Back to palettes

Palette

Tempest Cloud Soar

Captures the dramatic, heavy atmosphere of an approaching tempest, from dark to lighter grey clouds.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F2833#3C4B5F#6B7A8B#9CAABC#D1DFE8

Palette guide

How to use Tempest Cloud Soar

Overview

The Tempest Cloud Soar palette captures the dramatic essence of an approaching storm, transitioning from deep, heavy grays to lighter, ethereal cloud hues. With a robust anchor in #1F2833, it gracefully progresses through shades like #3C4B5F and #6B7A8B, culminating in the airy #D1DFE8. This palette is a designer's go-to for projects demanding a sense of drama, sophistication, and raw natural power. Its range of cool, desaturated tones makes it incredibly versatile for creating compelling visual narratives across digital and print media, offering excellent contrast potential and a refined aesthetic for both dark and light themes.

Best used for

  • Corporate and tech branding
  • Luxury product packaging
  • Editorial design with a serious tone
  • Web application interfaces
  • Architectural renders and visualizations
  • Dramatic photography backdrops

Suggested color roles

primary

Utilize #1F2833 as the dominant color for foundational elements, headers, or backgrounds in a dark theme, providing gravitas and depth.

secondary

Employ #3C4B5F for supporting sections, subheadings, or secondary navigation, maintaining a strong yet harmonious presence.

accent

Use #9CAABC for subtle highlights, interactive states, or to draw attention to key elements without being overly bright.

background

Apply #D1DFE8 as a clean, light background for readability, or #1F2833 for a sophisticated, deep dark mode experience.

text

For dark backgrounds like #1F2833, use #D1DFE8 or a near-white. On lighter backgrounds such as #D1DFE8, use #1F2833 or a dark charcoal for optimal contrast.

Accessibility notes

  • Ensure #D1DFE8 text on #1F2833 backgrounds meets WCAG AA standards for readability.
  • Be cautious with #9CAABC on mid-tones like #6B7A8B for small text or critical information.
  • Consider using a slightly darker text color than pure black for #D1DFE8 backgrounds for a softer aesthetic.
  • Always verify contrast ratios for links and interactive elements, especially against similar tonal values.

Recommended combinations

Deep Stratum

A strong contrast pairing of dark and light, balanced by a versatile mid-tone, perfect for main content blocks and headers.

#1F2833 · #D1DFE8 · #6B7A8B

Cloud Progression

Creates a smooth, atmospheric transition, ideal for subtle gradients, layered UI elements, or depicting depth.

#3C4B5F · #6B7A8B · #9CAABC

Soft Highlight

Combines the deepest tone with a gentle accent and a supportive mid-tone, suitable for subtle branding or feature highlights.

#1F2833 · #9CAABC · #3C4B5F

CSS variables

:root {
  --tempest-cloud-soar-1: #1F2833;
  --tempest-cloud-soar-2: #3C4B5F;
  --tempest-cloud-soar-3: #6B7A8B;
  --tempest-cloud-soar-4: #9CAABC;
  --tempest-cloud-soar-5: #D1DFE8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tempest-cloud-soar": {
        1: "#1F2833",
        2: "#3C4B5F",
        3: "#6B7A8B",
        4: "#9CAABC",
        5: "#D1DFE8",
      }
    }
  }
}

Related searches

dramatic grey blue palettestormy sky color schemeelegant dark neutral colorsUI cool grey themecorporate sophisticated palette

Palette colors

Hex values

Color 1#1F2833
·
Color 2#3C4B5F
·
Color 3#6B7A8B
·
Color 4#9CAABC
·
Color 5#D1DFE8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.4:1AA18
6.3:1AA
10.9:1AAA
2
1.7:1Fail
2:1Fail
3.8:1AA18
6.5:1AA
3
3.4:1AA18
2:1Fail
1.9:1Fail
3.2:1AA18
4
6.3:1AA
3.8:1AA18
1.9:1Fail
1.7:1Fail
5
10.9:1AAA
6.5:1AA
3.2:1AA18
1.7:1Fail

Similar palettes

More like Tempest Cloud Soar

View all dark
Stormy Night Embrace
Storm Cloud Surge
Tempest Wave Crash
Tempestuous Sky Fury
Acid Rain Gloom
City Night Concrete