Back to palettes

Palette

Cloudburst Sky

Subtle blues and grays capture the evolving drama of a sky gathering for a rain shower.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#A9BCCF#9DAABD#8F98A7#7F8791

Palette guide

How to use Cloudburst Sky

Overview

The Cloudburst Sky palette offers subtle blues and grays, capturing the evolving drama of a sky gathering for a rain shower. Ranging from the deep, moody #7F8791 to the airy #B0C4DE, with nuanced transitions through #8F98A7, #9DAABD, and #A9BCCF, this collection is perfect for evoking calm and sophistication. It's an excellent choice for designers and developers aiming to create serene digital experiences, elegant branding, or tranquil physical spaces. The palette's cool, understated nature is ideal for projects seeking a refined, peaceful, and subtly dramatic aesthetic, ensuring a harmonious and inviting visual presence.

Best used for

  • Weather app interfaces
  • Atmospheric photography websites
  • Corporate tech branding
  • Luxury travel marketing
  • Environmental awareness campaigns
  • Moody interior design concepts

Suggested color roles

primary

Use #7F8791 as the dominant, grounding color for main headers, navigation, or strong brand elements. It provides a deep, stable foundation.

secondary

Employ #8F98A7 for supporting sections, subheadings, or secondary content. It offers substantial presence while being softer than the primary.

accent

Apply #9DAABD for subtle highlights, interactive states, or decorative elements. Its mid-tone cool blue provides gentle contrast.

background

Utilize #B0C4DE or #A9BCCF for clean, expansive backgrounds. These light blue-greys create an airy, serene canvas.

text

For body text on light backgrounds like #B0C4DE, #7F8791 or #8F98A7 provide excellent readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

  • Ensure #7F8791 or #8F98A7 text on #B0C4DE or #A9BCCF backgrounds meets WCAG contrast standards.
  • Avoid using #9DAABD text on #A9BCCF or #B0C4DE, as the contrast will be insufficient for legibility.
  • Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
  • For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Stormy Horizon

Ideal for a sophisticated, moody theme. #7F8791 for primary, #8F98A7 for secondary, and #B0C4DE for a serene background.

#7F8791 · #8F98A7 · #B0C4DE

Cloud Layers

Excellent for lighter sections or subtle gradients, evoking clarity and openness.

#9DAABD · #A9BCCF · #8F98A7

Sky Gathering

Creates an airy, expansive feel. #8F98A7 for grounding, #A9BCCF as main background, with #B0C4DE for subtle accents.

#8F98A7 · #A9BCCF · #B0C4DE

CSS variables

:root {
  --cloudburst-sky-1: #B0C4DE;
  --cloudburst-sky-2: #A9BCCF;
  --cloudburst-sky-3: #9DAABD;
  --cloudburst-sky-4: #8F98A7;
  --cloudburst-sky-5: #7F8791;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudburst-sky": {
        1: "#B0C4DE",
        2: "#A9BCCF",
        3: "#9DAABD",
        4: "#8F98A7",
        5: "#7F8791",
      }
    }
  }
}

Related searches

moody blue grey palettestormy sky web designserene weather UI colorscalm blue brandingdeep grey blue color scheme

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#A9BCCF
·
Color 3#9DAABD
·
Color 4#8F98A7
·
Color 5#7F8791
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.6:1Fail
2:1Fail
2
1.1:1Fail
1.2:1Fail
1.5:1Fail
1.9:1Fail
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.6:1Fail
1.5:1Fail
1.2:1Fail
1.2:1Fail
5
2:1Fail
1.9:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Cloudburst Sky

View all cool
Cloud Burst Sky
Stormy Sky Serene
Stormy Sky Embrace
Aegean Horizon
Agate Grotto
Alpine Mist