Back to palettes

Palette

Cloudburst Serenity

A peaceful range of blues and grays, mimicking the tranquil beauty of the sky after a light cloudburst.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6D7F9A#97A9BB#CADDEE#C3CED9#8DA4B6

Palette guide

How to use Cloudburst Serenity

Overview

The Cloudburst Serenity palette presents a peaceful range of blues and grays, mimicking the tranquil beauty of the sky after a light cloudburst. With the deep yet subtle #6D7F9A, versatile mid-tones like #8DA4B6 and #97A9BB, and airy lighter shades #C3CED9 and #CADDEE, 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 natural aesthetic, ensuring a harmonious and inviting visual presence.

Best used for

  • Corporate branding with a calm feel
  • Luxury travel websites
  • Architectural visualization
  • High-end product packaging
  • Meditative app designs
  • Weather forecasting apps

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

For body text on light backgrounds like #CADDEE, #6D7F9A or #8DA4B6 provide excellent readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

  • Ensure #6D7F9A or #8DA4B6 text on #CADDEE or #C3CED9 backgrounds meets WCAG contrast standards.
  • Avoid using #97A9BB text on #CADDEE or #C3CED9, 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

Post-Rain Calm

Ideal for a sophisticated, calming theme. #6D7F9A for primary, #8DA4B6 for secondary, and #CADDEE for a serene background.

#6D7F9A · #8DA4B6 · #CADDEE

Sky Wash

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

#97A9BB · #C3CED9 · #CADDEE

Cloudy Respite

Creates an airy, expansive feel. #8DA4B6 for grounding, #CADDEE as main background, with #C3CED9 for subtle accents.

#8DA4B6 · #CADDEE · #C3CED9

CSS variables

:root {
  --cloudburst-serenity-1: #6D7F9A;
  --cloudburst-serenity-2: #97A9BB;
  --cloudburst-serenity-3: #CADDEE;
  --cloudburst-serenity-4: #C3CED9;
  --cloudburst-serenity-5: #8DA4B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudburst-serenity": {
        1: "#6D7F9A",
        2: "#97A9BB",
        3: "#CADDEE",
        4: "#C3CED9",
        5: "#8DA4B6",
      }
    }
  }
}

Related searches

cool blue grey palettepost cloudburst web designserene sky UI colorscalm blue brandingmisty weather color scheme

Palette colors

Hex values

Color 1#6D7F9A
·
Color 2#97A9BB
·
Color 3#CADDEE
·
Color 4#C3CED9
·
Color 5#8DA4B6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
2.6:1Fail
1.6:1Fail
2
1.7:1Fail
1.7:1Fail
1.5:1Fail
1.1:1Fail
3
2.9:1Fail
1.7:1Fail
1.1:1Fail
1.9:1Fail
4
2.6:1Fail
1.5:1Fail
1.1:1Fail
1.6:1Fail
5
1.6:1Fail
1.1:1Fail
1.9:1Fail
1.6:1Fail

Similar palettes

More like Cloudburst Serenity

View all cool
Azure Sky Whisper
Cloudburst Sky Watch
Cloudscape Serenity Blue
Dreamy Sky Canvas
Twilight Cloud Gaze
Whispering Sky Hues