Back to palettes

Palette

Cloud Burst Sky

Inspired by a dramatic sky moments before a cloudburst, with deep blues shifting to ominous grays.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Burst Sky 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 Cloud Burst Sky.

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

Data visualization

#1E3A5F#4C6A8D#8FA1B3#C7D3DB#EBF0F2

Palette guide

How to use Cloud Burst Sky

Overview

The Cloud Burst Sky palette is inspired by the dramatic moments before a storm, featuring deep blues shifting into ominous grays. This cool collection ranges from the light, almost white #EBF0F2 and #C7D3DB, through the mid-tone #8FA1B3 and #4C6A8D, culminating in the profound depth of #1E3A5F. It's perfect for projects requiring a sense of power, sophistication, and natural grandeur. Designers can leverage these colors to create impactful branding, immersive digital experiences, or compelling data visualizations that convey both drama and calm.

Best used for

  • Weather forecasting and climate apps
  • Outdoor adventure and gear branding
  • Corporate technology and finance
  • Moody photography backdrops
  • Data visualization and dashboards
  • Automotive design concepts

Suggested color roles

primary

Use #EBF0F2 (lightest white-grey) or #C7D3DB (light grey-blue) for main content areas, offering clarity.

secondary

Apply #8FA1B3 (medium blue-grey) or #4C6A8D (mid-tone blue) for sub-sections, navigation, or secondary information.

accent

Introduce #1E3A5F (deep navy blue) for strong headings, calls to action, or key branding elements, providing gravitas.

background

A light base of #EBF0F2 provides an expansive feel, or use #1E3A5F for a dramatic, immersive dark background.

text

On light backgrounds, use #1E3A5F or black. On dark backgrounds like #1E3A5F, white or #C7D3DB offers excellent contrast.

Accessibility notes

  • Ensure high contrast for text; light text on dark backgrounds and dark text on light backgrounds.
  • Use #1E3A5F for critical text on #EBF0F2 or #C7D3DB to ensure maximum readability.
  • Interactive elements should have distinct states and sufficient contrast.
  • Avoid using mid-tone blues for small text where contrast might be insufficient.

Recommended combinations

Storm Front

Creates a dramatic contrast, ideal for powerful branding or a striking hero section.

#1E3A5F · #4C6A8D · #EBF0F2

Cloudy Gradient

Perfect for subtle transitions in backgrounds or data charts, mimicking a changing sky.

#C7D3DB · #8FA1B3 · #4C6A8D

Clear Horizon

Offers a crisp, clean look with a strong anchor, suitable for corporate or informational designs.

#EBF0F2 · #C7D3DB · #1E3A5F

CSS variables

:root {
  --cloud-burst-sky-1: #1E3A5F;
  --cloud-burst-sky-2: #4C6A8D;
  --cloud-burst-sky-3: #8FA1B3;
  --cloud-burst-sky-4: #C7D3DB;
  --cloud-burst-sky-5: #EBF0F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-burst-sky": {
        1: "#1E3A5F",
        2: "#4C6A8D",
        3: "#8FA1B3",
        4: "#C7D3DB",
        5: "#EBF0F2",
      }
    }
  }
}

Related searches

stormy sky palettedeep blue grey colorscloudburst weather schemedramatic cool tonescorporate blue branding

Palette colors

Hex values

Color 1#1E3A5F
·
Color 2#4C6A8D
·
Color 3#8FA1B3
·
Color 4#C7D3DB
·
Color 5#EBF0F2
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.3:1AA18
7.5:1AAA
10:1AAA
2
2.1:1Fail
2.1:1Fail
3.7:1AA18
4.9:1AA
3
4.3:1AA18
2.1:1Fail
1.7:1Fail
2.3:1Fail
4
7.5:1AAA
3.7:1AA18
1.7:1Fail
1.3:1Fail
5
10:1AAA
4.9:1AA
2.3:1Fail
1.3:1Fail

Similar palettes

More like Cloud Burst Sky

View all cool
Cloudburst Sky
Cloudburst Sky Watch
Stormy Sky Embrace
Stormy Sky Serene
Aegean Horizon
Agate Grotto