Palette

Violet Stardust Swirl

Deep purples and violets blend like swirling cosmic dust, capturing the mysterious beauty of distant nebulae.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Violet Stardust 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 Violet Stardust Swirl.

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

Data visualization

#2D0B44#4A1569#7F2F9C#C177D4#E8B8F0

Palette guide

How to use Violet Stardust Swirl

Overview

The Violet Stardust Swirl palette plunges into the cosmic depths, offering a rich array of deep purples and ethereal violets. Starting with the profound #2D0B44 and transitioning through mysterious #4A1569 and vibrant #7F2F9C, it culminates in the delicate glow of #E8B8F0. This palette is exceptional for projects requiring a sense of mystery, luxury, or cosmic wonder. Designers can leverage its depth for immersive backgrounds, while developers will appreciate the distinct yet harmonious steps for creating dynamic UI states, dark mode themes, or captivating digital art. It’s perfect for conveying sophistication with a hint of the unknown.

Best used for

Sci-fi or fantasy game interfaces
Luxury product websites and apps
Dark mode UI themes
Astrology or spiritual branding
High-end event design
Mysterious book covers or digital art

Suggested color roles

primary

Utilize #2D0B44 for dominant backgrounds or foundational elements, establishing a deep, cosmic base.

secondary

Apply #4A1569 for significant headings, navigation, or panel backgrounds, adding depth to content areas.

accent

Employ #7F2F9C for interactive elements, buttons, or key highlights, drawing attention with its vibrant hue.

background

The deepest shade, #2D0B44, serves as an excellent dark background, evoking the void of space.

text

For primary text on dark backgrounds, use #E8B8F0 or #C177D4. For subtle secondary text, consider #7F2F9C against very dark shades.

Accessibility notes

Ensure high contrast when pairing lighter colors like #E8B8F0 with very dark backgrounds such as #2D0B44.
Avoid using mid-tones like #7F2F9C for small text on backgrounds of similar luminance.
Check that interactive elements using #C177D4 have sufficient contrast against their surrounding UI.
Consider using white or near-white text on #2D0B44 or #4A1569 for optimal readability of long-form content.

Recommended combinations

Cosmic Depths

Effective for dark mode UIs, main content areas, and sparkling highlights.

#2D0B44 · #7F2F9C · #E8B8F0

Mystic Glow

Great for secondary panels, interactive elements, and a deep, grounding base.

#4A1569 · #C177D4 · #2D0B44

Starlight Veil

Ideal for soft gradients, decorative accents, and ethereal overlays.

#E8B8F0 · #C177D4 · #7F2F9C

CSS variables

:root {
  --violet-stardust-swirl-1: #2D0B44;
  --violet-stardust-swirl-2: #4A1569;
  --violet-stardust-swirl-3: #7F2F9C;
  --violet-stardust-swirl-4: #C177D4;
  --violet-stardust-swirl-5: #E8B8F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "violet-stardust-swirl": {
        1: "#2D0B44",
        2: "#4A1569",
        3: "#7F2F9C",
        4: "#C177D4",
        5: "#E8B8F0",
      }
    }
  }
}

Hex values

Color 1#2D0B44

Color 2#4A1569

Color 3#7F2F9C

Color 4#C177D4

Color 5#E8B8F0

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

5.5:1AA

10.1:1AAA

1.3:1Fail

1.7:1Fail

4.3:1AA18

7.8:1AAA

2.2:1Fail

1.7:1Fail

2.5:1Fail

4.5:1AA18

5.5:1AA

4.3:1AA18

2.5:1Fail

1.8:1Fail

10.1:1AAA

7.8:1AAA

4.5:1AA18

1.8:1Fail

Similar palettes

More like Violet Stardust Swirl

Galactic Void Shimmer

Celestial Glimmer Dust