Palette

Cloudburst Sky Watch

Soft blues and greys capturing the moody beauty of a sky just before or after a gentle cloudburst.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A607C#7D93AC#AECCE0#DDEEF7#304A66

Palette guide

How to use Cloudburst Sky Watch

Overview

The Cloudburst Sky Watch palette offers soft blues and greys, capturing the moody beauty of a sky just before or after a gentle cloudburst. With the deep, grounding #304A66, versatile mid-tones like #4A607C and #7D93AC, and airy lighter shades #AECCE0 and #DDEEF7, this collection is perfect for evoking calm and depth. 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 #304A66 as the dominant, grounding color for main headers, navigation, or strong brand elements. It provides a deep, stable foundation.

secondary

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

accent

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

background

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

text

For body text on light backgrounds like #DDEEF7, #304A66 or #4A607C provide excellent readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

Ensure #304A66 or #4A607C text on #DDEEF7 or #AECCE0 backgrounds meets WCAG contrast standards.
Avoid using #7D93AC text on #AECCE0 or #DDEEF7, 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 Depths

Ideal for a sophisticated, moody theme. #304A66 for primary, #4A607C for secondary, and #DDEEF7 for a serene background.

#304A66 · #4A607C · #DDEEF7

Sky Watch

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

#7D93AC · #AECCE0 · #DDEEF7

Hazy Horizon

Creates an airy, expansive feel. #4A607C for grounding, #AECCE0 as main background, with #DDEEF7 for subtle accents.

#4A607C · #AECCE0 · #DDEEF7

CSS variables

:root {
  --cloudburst-sky-watch-1: #4A607C;
  --cloudburst-sky-watch-2: #7D93AC;
  --cloudburst-sky-watch-3: #AECCE0;
  --cloudburst-sky-watch-4: #DDEEF7;
  --cloudburst-sky-watch-5: #304A66;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudburst-sky-watch": {
        1: "#4A607C",
        2: "#7D93AC",
        3: "#AECCE0",
        4: "#DDEEF7",
        5: "#304A66",
      }
    }
  }
}

Hex values

Color 1#4A607C

Color 2#7D93AC

Color 3#AECCE0

Color 4#DDEEF7

Color 5#304A66

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

5.4:1AA

1.4:1Fail

2:1Fail

1.9:1Fail

2.7:1Fail

2.9:1Fail

3.8:1AA18

1.9:1Fail

1.4:1Fail

5.4:1AA

2.7:1Fail

1.4:1Fail

7.7:1AAA

1.4:1Fail

2.9:1Fail

5.4:1AA

7.7:1AAA

Similar palettes

More like Cloudburst Sky Watch

Cloudburst Sky Watch

See it in context.

Ready when you are.

Built with Cloudburst Sky Watch.

How to use Cloudburst Sky Watch

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Stormy Depths

Sky Watch

Hazy Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloudburst Sky Watch