Back to palettes

Palette

Cosmic Nebula Swirl

A vivid burst of purples and pinks, mimicking the swirling, energetic gas clouds of a distant nebula in deep space.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#330033#660066#990099#CC00CC#FF00FF

Palette guide

How to use Cosmic Nebula Swirl

Overview

The Cosmic Nebula Swirl palette presents a vivid burst of purples and pinks, mimicking the swirling, energetic gas clouds of a distant nebula in deep space. It features a progressive gradient from the deep #330033 (dark plum) to the rich #660066 (medium purple), intensifying through #990099 (bright purple) and #CC00CC (magenta), culminating in the electrifying #FF00FF (fuchsia). This vibrant and energetic collection is perfect for designers and developers crafting dynamic, eye-catching, or fantastical digital experiences. It excels in creating immersive backgrounds, bold branding, and UI elements that demand attention and convey a sense of cosmic wonder and excitement.

Best used for

  • High-energy game interfaces and sci-fi concept art
  • Vibrant event promotion and concert visuals
  • Youth-oriented digital content and social media graphics
  • Animated web backgrounds and interactive data visualizations
  • Fantasy illustrations and magical themed designs
  • Bold tech product marketing

Suggested color roles

primary

Use #330033 as a deep, anchoring background color, providing stability for the brighter, more intense purples and pinks to swirl.

secondary

Employ #660066 or #990099 for significant content areas, subheadings, or distinct sections, offering rich, supporting hues.

accent

Apply #CC00CC or #FF00FF for high-impact calls-to-action, alerts, or to highlight key interactive features with intense, glowing vibrancy.

background

The full spectrum from #330033 to #FF00FF can be used in gradients to create a dynamic, swirling nebula effect for backgrounds.

text

On dark backgrounds like #330033 or #660066, use white or a very light gray for body text. On brighter purples, a deep charcoal or black offers contrast, though white often maintains the ethereal feel.

Accessibility notes

  • Ensure strong contrast when using #CC00CC or #FF00FF for text against #330033 or #660066.
  • White text on #330033, #660066, and #990099 generally provides good readability.
  • Avoid using #CC00CC as text on #990099 due to potential low contrast; reserve for larger headlines or accents.
  • Test color combinations for different forms of colorblindness, as the purple-pink spectrum can be challenging for some users.

Recommended combinations

Deep Swirl

Creates a rich, evolving purple gradient, ideal for atmospheric backgrounds or elegant, layered UI components.

#330033 · #660066 · #990099

Nebula Burst

Perfect for vibrant accents, interactive elements, or conveying a luminous, energetic glow in illustrations and decorative elements.

#990099 · #CC00CC · #FF00FF

Cosmic Pulse

Excellent for establishing clear visual hierarchy, with bright, pulsating accents against a deep, mysterious backdrop.

#330033 · #FF00FF · #CC00CC

CSS variables

:root {
  --cosmic-nebula-swirl-2-1: #330033;
  --cosmic-nebula-swirl-2-2: #660066;
  --cosmic-nebula-swirl-2-3: #990099;
  --cosmic-nebula-swirl-2-4: #CC00CC;
  --cosmic-nebula-swirl-2-5: #FF00FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-nebula-swirl-2": {
        1: "#330033",
        2: "#660066",
        3: "#990099",
        4: "#CC00CC",
        5: "#FF00FF",
      }
    }
  }
}

Related searches

vibrant purple palettecosmic nebula colorsenergetic space themebright galaxy uifantasy purple pink

Palette colors

Hex values

Color 1#330033
·
Color 2#660066
·
Color 3#990099
·
Color 4#CC00CC
·
Color 5#FF00FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.7:1AA18
5.6:1AA
2
1.5:1Fail
1.6:1Fail
2.5:1Fail
3.8:1AA18
3
2.4:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
3.7:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
5.6:1AA
3.8:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Cosmic Nebula Swirl

View all vibrant
Astral Nebula Bloom
Celestial Firestorm
Cosmic Dust Trails
Galactic Nebula Bloom
Cosmic Bloom Nebula
Cosmic Dawn Hues