Palette

Celestial Dust Swirl

A soft, swirling nebula of purples and greys, evoking distant stardust and cosmic mystery.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F3A5B#7A618C#B0A5C2#CFC2D9#2E1C3A

Palette guide

How to use Celestial Dust Swirl

Overview

The Celestial Dust Swirl palette conjures a soft, swirling nebula of purples and greys, evoking distant stardust and cosmic mystery. Ranging from the deep #2E1C3A to the lighter #CFC2D9, with harmonious intermediate shades like #4F3A5B, #7A618C, and #B0A5C2, this collection exudes a calm and mystical aura. It's ideal for designers and developers looking to create ethereal, sophisticated, and atmospheric digital experiences, branding, or interfaces that blend subtlety with cosmic wonder. Its muted yet rich tones offer versatility for a thoughtful design.

Best used for

Spiritual and wellness retreat branding
Artistic photography websites
Elegant home decor e-commerce
Minimalist app interfaces with a touch of mystery
Soft sci-fi concept art
Sophisticated editorial content

Suggested color roles

primary

#2E1C3A serves as a deep, grounding color for backgrounds, headers, or foundational UI elements, setting a mysterious yet calm tone.

secondary

#4F3A5B or #7A618C are excellent for secondary content areas, card backgrounds, or navigation, adding depth and visual interest.

accent

#CFC2D9 provides a soft, ethereal highlight, perfect for interactive elements, calls to action, or subtle glowing effects.

background

For dark themes, #2E1C3A offers a rich canvas. For lighter content, #CFC2D9 provides an airy base.

text

For dark backgrounds, #CFC2D9 or #B0A5C2 ensures excellent readability. For light backgrounds, a dark charcoal or #2E1C3A is ideal.

Accessibility notes

#CFC2D9 provides strong contrast for text on #2E1C3A, #4F3A5B, and #7A618C, meeting WCAG AA standards.
Be cautious when using #B0A5C2 for small text on #CFC2D9; ensure sufficient contrast.
Ensure interactive elements using lighter shades on darker backgrounds have clear focus states.
This palette offers good options for high contrast text pairings, especially with the lightest and darkest shades.

Recommended combinations

Mystical Calm

Ideal for a sophisticated dark mode interface with clear hierarchy and a soft accent.

#2E1C3A · #CFC2D9 · #7A618C

Nebula Layers

Perfect for background fills or hero sections, creating a smooth, ethereal transition.

#4F3A5B · #7A618C · #B0A5C2

Light Elegance

Use #CFC2D9 as a light background for content blocks, with dark text and a deeper accent.

#CFC2D9 · #2E1C3A · #4F3A5B

CSS variables

:root {
  --celestial-dust-swirl-1: #4F3A5B;
  --celestial-dust-swirl-2: #7A618C;
  --celestial-dust-swirl-3: #B0A5C2;
  --celestial-dust-swirl-4: #CFC2D9;
  --celestial-dust-swirl-5: #2E1C3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-dust-swirl": {
        1: "#4F3A5B",
        2: "#7A618C",
        3: "#B0A5C2",
        4: "#CFC2D9",
        5: "#2E1C3A",
      }
    }
  }
}

Hex values

Color 1#4F3A5B

Color 2#7A618C

Color 3#B0A5C2

Color 4#CFC2D9

Color 5#2E1C3A

Accessibility

Contrast checker

1.9:1Fail

4.3:1AA18

5.9:1AA

1.6:1Fail

1.9:1Fail

2.3:1Fail

3.2:1AA18

2.9:1Fail

4.3:1AA18

2.3:1Fail

1.4:1Fail

6.7:1AA

5.9:1AA

3.2:1AA18

1.4:1Fail

9.2:1AAA

1.6:1Fail

2.9:1Fail

6.7:1AA

9.2:1AAA

Similar palettes

More like Celestial Dust Swirl

View all Cool

Frosty Morning Chill

Lavender Twilight Field

Twilight Garden Whisper

Aegean Coastline Muse

Alpine Lake Dawn

Ancient Cypress Shade