Palette

Celestial Firestorm

Intense purples against deep cosmic blacks, resembling a distant, powerful stellar firestorm in a nebula.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#330033#660066#CC00CC#FF66FF

Palette guide

How to use Celestial Firestorm

Overview

The Celestial Firestorm palette unleashes intense purples against deep cosmic blacks, resembling a distant, powerful stellar firestorm in a nebula. Featuring absolute #000000, it builds through the rich #330033 and #660066, culminating in the vibrant #CC00CC and the energetic #FF66FF. This collection is perfect for designers and developers aiming to create dynamic, energetic, and visually striking digital experiences, branding, or interfaces. Its bold contrasts and luminous purples provide a dramatic foundation for projects that demand attention and convey power.

Best used for

High-energy gaming platforms
Sci-fi movie posters or trailers
Event branding for concerts or festivals
Vibrant tech startup websites
Dark mode UI with bright accents
Fashion or beauty campaigns with a bold edge

Suggested color roles

primary

#000000 serves as the ultimate dark background, establishing a profound, infinite space.

secondary

#330033 or #660066 are excellent for main sections, navigation, or card backgrounds, adding rich color to the darkness.

accent

#FF66FF or #CC00CC provides a powerful, luminous highlight, perfect for calls to action, interactive elements, or glowing effects.

background

#000000 is the dominant background, creating a true dark mode experience.

text

#FF66FF or #CC00CC ensures excellent readability against the dark backgrounds. A near-white is also suitable.

Accessibility notes

#FF66FF and #CC00CC provide strong contrast for text on #000000, #330033, and #660066, meeting WCAG AA standards.
Be cautious when using #CC00CC for small text on #FF66FF; ensure sufficient contrast.
Ensure interactive elements using lighter shades have clear focus and hover states against the deep backgrounds.
This palette is excellent for high-contrast dark mode designs, promoting readability.

Recommended combinations

Stellar Burst

A dramatic dark mode setup with a powerful, vibrant accent and clear text.

#000000 · #FF66FF · #660066

Energetic Gradient

Ideal for background fills or hero sections, creating an intense, dynamic transition.

#330033 · #660066 · #CC00CC

Luminous Call

Use #FF66FF for prominent interactive elements or headings against deep, dark backgrounds.

#FF66FF · #000000 · #330033

CSS variables

:root {
  --celestial-firestorm-1: #000000;
  --celestial-firestorm-2: #330033;
  --celestial-firestorm-3: #660066;
  --celestial-firestorm-4: #CC00CC;
  --celestial-firestorm-5: #FF66FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-firestorm": {
        1: "#000000",
        2: "#330033",
        3: "#660066",
        4: "#CC00CC",
        5: "#FF66FF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#330033

Color 3#660066

Color 4#CC00CC

Color 5#FF66FF

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

4.4:1AA18

8.6:1AAA

1.2:1Fail

1.5:1Fail

3.7:1AA18

7.2:1AAA

1.8:1Fail

1.5:1Fail

2.5:1Fail

4.9:1AA

4.4:1AA18

3.7:1AA18

2.5:1Fail

1.9:1Fail

8.6:1AAA

7.2:1AAA

4.9:1AA

1.9:1Fail

Similar palettes

More like Celestial Firestorm

Galactic Nebula Bloom

Astral Nebula Bloom

Cosmic Bloom Nebula