Back to palettes

Palette

Cloud Burst Horizon

Reflects the dramatic yet tranquil hues of a cloud-laden sky just before a gentle rain.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#728CA3#C5CCD5#47596B#9FAAC5#B3BCCF

Palette guide

How to use Cloud Burst Horizon

Overview

The Cloud Burst Horizon palette captures the dramatic yet tranquil hues of a cloud-laden sky just before a gentle rain. This neutral collection features a range of cool blue-greys, from the light #C5CCD5 and #B3BCCF, through the deeper #9FAAC5 and #728CA3, culminating in the grounding #47596B. It's ideal for designs that require a sophisticated, serene, and slightly moody atmosphere. Designers will find these colors versatile for creating depth and visual interest in projects that value understated elegance and natural inspiration.

Best used for

  • Weather forecasting applications
  • Nature photography websites
  • Architectural rendering presentations
  • Corporate reports and branding
  • Calm digital interfaces and dashboards
  • Outdoor adventure marketing

Suggested color roles

primary

Use #C5CCD5 (light grey-blue) or #B3BCCF (medium grey-blue) for main content areas and clean backgrounds.

secondary

Apply #9FAAC5 (cooler grey-blue) or #728CA3 (deeper blue-grey) for navigation, sub-sections, or data visualization.

accent

Introduce #47596B (darkest blue-grey) for strong headings, calls to action, or prominent interactive elements.

background

A base of #C5CCD5 offers a clean, serene, and expansive feel, reminiscent of a clear sky.

text

For optimal contrast, use #47596B or black for text on lighter backgrounds. White text works well on #47596B.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing mid-tone greys like #9FAAC5 with similar backgrounds.
  • Use the darkest shade (#47596B) for primary text on light backgrounds to ensure readability.
  • Clearly differentiate interactive elements through sufficient color contrast or visual cues.
  • Verify contrast ratios using accessibility tools for all text and UI components.

Recommended combinations

Horizon Depth

Creates a natural gradient from light sky to deep horizon, perfect for headers or background imagery.

#C5CCD5 · #728CA3 · #47596B

Cloudy Serenity

Highlights the subtle variations of a cloud-filled sky, ideal for layered UI elements or infographics.

#B3BCCF · #9FAAC5 · #C5CCD5

Stormy Calm

Provides a moody yet sophisticated feel, suitable for dramatic visuals or elegant dark mode interfaces.

#47596B · #728CA3 · #B3BCCF

CSS variables

:root {
  --cloud-burst-horizon-1: #728CA3;
  --cloud-burst-horizon-2: #C5CCD5;
  --cloud-burst-horizon-3: #47596B;
  --cloud-burst-horizon-4: #9FAAC5;
  --cloud-burst-horizon-5: #B3BCCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-burst-horizon": {
        1: "#728CA3",
        2: "#C5CCD5",
        3: "#47596B",
        4: "#9FAAC5",
        5: "#B3BCCF",
      }
    }
  }
}

Related searches

cloudy sky color paletteserene grey bluedramatic weather colorscalm horizon tonescorporate blue grey

Palette colors

Hex values

Color 1#728CA3
·
Color 2#C5CCD5
·
Color 3#47596B
·
Color 4#9FAAC5
·
Color 5#B3BCCF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
2.1:1Fail
1.5:1Fail
1.8:1Fail
2
2.2:1Fail
4.5:1AA18
1.4:1Fail
1.2:1Fail
3
2.1:1Fail
4.5:1AA18
3.1:1AA18
3.8:1AA18
4
1.5:1Fail
1.4:1Fail
3.1:1AA18
1.2:1Fail
5
1.8:1Fail
1.2:1Fail
3.8:1AA18
1.2:1Fail

Similar palettes

More like Cloud Burst Horizon

View all neutral
Cloud Kissed Peak
Cloudy Day Serene
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Fog Mornings
Coastal Stone Hearth