Palette

Cosmic Dust Swirl

A swirling blend of deep purples and soft lavenders, capturing the ethereal beauty of distant cosmic dust.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3B0054#6A1A70#9D3C7D#CFA9C7#E0D3EB

Palette guide

How to use Cosmic Dust Swirl

Overview

The Cosmic Dust Swirl palette offers a swirling blend of deep purples and soft lavenders, capturing the ethereal beauty of distant cosmic dust. Ranging from the profound #3B0054 to the delicate #E0D3EB, this collection is perfect for designers creating elegant, mystical, and visually harmonious digital experiences. It's particularly suitable for sophisticated branding, artistic web designs, or applications that aim for a gentle yet captivating aesthetic. Developers can integrate these versatile hex codes, such as the rich #9D3C7D, to build visually compelling applications and websites, ensuring a consistent and enchanting user experience across various digital platforms.

Best used for

Elegant luxury branding
Artistic web portfolios
Mystical digital illustrations
Soft fashion design
Ethereal event invitations
High-end cosmetic packaging

Suggested color roles

primary

#6A1A70 - A rich, foundational purple that serves as an excellent base for main content areas or primary branding elements.

secondary

#9D3C7D - A vibrant mid-tone purple, suitable for secondary information, interactive components, or subtle data visualization.

accent

#CFA9C7 - A lighter, soft lavender, ideal for drawing attention to calls to action, highlights, or gentle glow effects.

background

#3B0054 - The deepest, most enveloping shade, creating a profound and immersive backdrop for all other elements.

text

#E0D3EB or white - Provides clear readability and a soft glow against the darker shades within the palette.

Accessibility notes

Ensure sufficient contrast for text, especially when using #9D3C7D on #6A1A70.
Always use #E0D3EB or white for body text on #3B0054 and #6A1A70 to meet WCAG AA standards.
Be cautious with contrast when layering #CFA9C7 over #9D3C7D for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Deep Cosmic Swirl

Creates a dynamic, layered background that evokes movement and deep space mystery.

#3B0054 · #6A1A70 · #9D3C7D

Ethereal Highlight

Perfect for drawing attention to key features or calls to action with a soft, shimmering contrast.

#6A1A70 · #CFA9C7 · #E0D3EB

Mystic Layers

Excellent for establishing clear visual hierarchy, separating content blocks with a deep base and light accents.

#3B0054 · #9D3C7D · #E0D3EB

CSS variables

:root {
  --cosmic-dust-swirl-2-1: #3B0054;
  --cosmic-dust-swirl-2-2: #6A1A70;
  --cosmic-dust-swirl-2-3: #9D3C7D;
  --cosmic-dust-swirl-2-4: #CFA9C7;
  --cosmic-dust-swirl-2-5: #E0D3EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-swirl-2": {
        1: "#3B0054",
        2: "#6A1A70",
        3: "#9D3C7D",
        4: "#CFA9C7",
        5: "#E0D3EB",
      }
    }
  }
}

Hex values

Color 1#3B0054

Color 2#6A1A70

Color 3#9D3C7D

Color 4#CFA9C7

Color 5#E0D3EB

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

7.7:1AAA

11.2:1AAA

1.5:1Fail

1.7:1Fail

5.1:1AA

7.4:1AAA

2.6:1Fail

1.7:1Fail

3:1AA18

4.4:1AA18

7.7:1AAA

5.1:1AA

3:1AA18

1.4:1Fail

11.2:1AAA

7.4:1AAA

4.4:1AA18

1.4:1Fail

Similar palettes

More like Cosmic Dust Swirl

Cosmic Iridescent Shine

Cosmic Nebula Hues

Amethyst Aura