Palette

Galactic Cloud Drift

Softly swirling purples and blues reminiscent of distant nebulae gracefully drifting through the cosmos.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Galactic Cloud Drift 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 Galactic Cloud Drift.

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

Data visualization

#202340#4B3D80#7C6BB5#B8B0DA#E0E3EB

Palette guide

How to use Galactic Cloud Drift

Overview

The Galactic Cloud Drift palette features softly swirling purples and blues reminiscent of distant nebulae gracefully drifting through the cosmos. With a deep indigo #202340, rich purple #4B3D80, soft lavender #7C6BB5, pale violet #B8B0DA, and a very light grey #E0E3EB, this palette is genuinely useful for designers and developers seeking a calm, elegant, and serene aesthetic. It's perfect for creating soothing digital experiences, sophisticated branding, or educational platforms. The harmonious blend of cool tones allows for gentle gradients and a sense of peaceful depth, ideal for applications requiring a tranquil mood.

Best used for

Wellness and meditation applications
Serene website designs
Elegant corporate branding
Educational platform interfaces
Calming digital art and illustrations
Lifestyle blogs and content

Suggested color roles

primary

#202340 provides a stable, calming base, excellent for main layouts or strong headers.

secondary

#4B3D80 offers a rich, supportive purple, ideal for secondary content or accents.

accent

#B8B0DA delivers a soft, dreamy highlight, suitable for interactive elements or subtle details.

background

#E0E3EB for a light, airy feel, or #202340 for a calm, deep dark mode.

text

Dark charcoal or #202340 on light backgrounds, and white on dark backgrounds for optimal readability.

Accessibility notes

The lighter colors like #B8B0DA and #E0E3EB require dark text for readability.
Ensure sufficient contrast when using #7C6BB5 or #4B3D80 for text on lighter backgrounds.
Avoid using light-colored text on #B8B0DA as it will likely lack sufficient contrast.
Check contrast ratios for all interactive elements to ensure clear distinction.

Recommended combinations

Serene Website

Creates a calm and inviting aesthetic for wellness apps or elegant personal websites.

#202340 · #7C6BB5 · #E0E3EB

Soft Transition

Excellent for subtle gradient backgrounds, header designs, or atmospheric illustrations.

#4B3D80 · #7C6BB5 · #B8B0DA

Elegant Contrast

Perfect for clean UI elements, professional dashboards, or refined brand accents.

#E0E3EB · #202340 · #4B3D80

CSS variables

:root {
  --galactic-cloud-drift-1: #202340;
  --galactic-cloud-drift-2: #4B3D80;
  --galactic-cloud-drift-3: #7C6BB5;
  --galactic-cloud-drift-4: #B8B0DA;
  --galactic-cloud-drift-5: #E0E3EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "galactic-cloud-drift": {
        1: "#202340",
        2: "#4B3D80",
        3: "#7C6BB5",
        4: "#B8B0DA",
        5: "#E0E3EB",
      }
    }
  }
}

Hex values

Color 1#202340

Color 2#4B3D80

Color 3#7C6BB5

Color 4#B8B0DA

Color 5#E0E3EB

Accessibility

Contrast checker

1.7:1Fail

3.4:1AA18

7.5:1AAA

11.9:1AAA

1.7:1Fail

2:1Fail

4.5:1AA

7.2:1AAA

3.4:1AA18

2:1Fail

2.2:1Fail

3.5:1AA18

7.5:1AAA

4.5:1AA

2.2:1Fail

1.6:1Fail

11.9:1AAA

7.2:1AAA

3.5:1AA18

1.6:1Fail

Similar palettes

More like Galactic Cloud Drift

Celestial Aurora Dance

Celestial Dreamscape