Palette

Celestial Cloud Swirl

Ethereal blues and muted greys swirl together, capturing the dreamy, distant majesty of nebulae and cosmic clouds.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Cloud Swirl 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 Celestial Cloud Swirl.

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

Data visualization

#CADDE8#A8C3D8#5C8BA4#3E6B8D#F0F4F7

Palette guide

How to use Celestial Cloud Swirl

Overview

The Celestial Cloud Swirl palette captures the dreamy, distant majesty of nebulae and cosmic clouds with its ethereal blues and muted grays. It features a deep blue-gray #3E6B8D, a calming mid-blue #5C8BA4, and lighter, airy tones like #A8C3D8 and #CADDE8. The near-white #F0F4F7 completes this harmonious collection, providing a clean, expansive feel. This palette is perfect for designers and developers seeking a sophisticated, minimalist, and tranquil aesthetic. It's ideal for corporate branding, clean UI/UX designs, or any project aiming for an understated yet profound visual identity.

Best used for

Corporate and professional websites
Minimalist UI/UX design
Cloud service branding
Architectural or interior design portfolios
Data visualization dashboards
Serene educational platforms

Suggested color roles

primary

#3E6B8D - A deep, muted blue, ideal for foundational elements, headers, or strong accents that need to provide a solid anchor.

secondary

#5C8BA4 - Use for subheadings, navigation, or larger content blocks, offering a calming mid-blue.

accent

#CADDE8 - A light, airy blue-gray, perfect for subtle highlights, interactive elements, or soft backgrounds for specific content.

background

#F0F4F7 - A very light, clean blue-gray, providing an open, crisp, and expansive canvas for content.

text

#3E6B8D - Offers excellent contrast and readability on lighter backgrounds like #F0F4F7, ensuring legibility for body text and headings.

Accessibility notes

Ensure #3E6B8D text on #F0F4F7 background meets WCAG AAA contrast ratio.
#A8C3D8 text on #CADDE8 will have insufficient contrast; avoid for critical information.
For body text, stick to #3E6B8D or a dark charcoal on the lightest backgrounds.
Consider a slightly darker shade of blue for text on #CADDE8 if a light text color is desired.

Recommended combinations

Nebula Depths

Deep blue-gray for base, lighter blue-gray for content, and near-white for background.

#3E6B8D · #A8C3D8 · #F0F4F7

Cosmic Flow

Mid-blue for main elements, light blue-gray for secondary, and deep blue-gray for grounding.

#5C8BA4 · #CADDE8 · #3E6B8D

Cloud Horizon

Very light background with mid-blue and lighter blue-gray for a soft, layered feel.

#F0F4F7 · #5C8BA4 · #A8C3D8

CSS variables

:root {
  --celestial-cloud-swirl-1: #CADDE8;
  --celestial-cloud-swirl-2: #A8C3D8;
  --celestial-cloud-swirl-3: #5C8BA4;
  --celestial-cloud-swirl-4: #3E6B8D;
  --celestial-cloud-swirl-5: #F0F4F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-cloud-swirl": {
        1: "#CADDE8",
        2: "#A8C3D8",
        3: "#5C8BA4",
        4: "#3E6B8D",
        5: "#F0F4F7",
      }
    }
  }
}

Hex values

Color 1#CADDE8

Color 2#A8C3D8

Color 3#5C8BA4

Color 4#3E6B8D

Color 5#F0F4F7

Accessibility

Contrast checker

1.3:1Fail

2.6:1Fail

4.1:1AA18

1.3:1Fail

2:1Fail

3.1:1AA18

1.7:1Fail

2.6:1Fail

2:1Fail

1.5:1Fail

3.3:1AA18

4.1:1AA18

3.1:1AA18

1.5:1Fail

5.1:1AA

1.3:1Fail

1.7:1Fail

3.3:1AA18

5.1:1AA

Similar palettes

More like Celestial Cloud Swirl

Celestial Cloud Swirl

See it in context.

Ready when you are.

Built with Celestial Cloud Swirl.

How to use Celestial Cloud Swirl

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Nebula Depths

Cosmic Flow

Cloud Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Celestial Cloud Swirl