Palette

Cosmic Ray Burst

An electrifying palette inspired by a brilliant cosmic explosion, filled with vibrant, contrasting colors.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Ray Burst 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 Ray Burst.

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

Data visualization

#5A009C#00A1FF#FF0088#FFD700#FFFFFF

Palette guide

How to use Cosmic Ray Burst

Overview

The Cosmic Ray Burst palette is an electrifying collection inspired by a brilliant cosmic explosion, filled with vibrant, contrasting colors. It centers around the intense #5A009C (deep violet) and the striking #00A1FF (electric blue). The palette explodes with the vivid #FF0088 (bright pink), the luminous #FFD700 (golden yellow), and the pure #FFFFFF (white). This vibrant and energetic collection is perfect for designers and developers crafting dynamic, eye-catching, or futuristic digital experiences. It excels in creating bold branding, attention-grabbing UI elements, and immersive digital art that conveys raw energy, excitement, and a sense of otherworldly phenomena.

Best used for

High-energy game interfaces and sci-fi concept art
Vibrant event promotion and concert visuals
Futuristic tech branding and marketing materials
Animated web backgrounds and interactive data visualizations
Youth-oriented digital content and social media graphics
Digital illustrations of cosmic explosions and light effects

Suggested color roles

primary

Utilize #5A009C as a deep, anchoring background color, providing stability for the brighter, more intense colors to burst from.

secondary

Employ #00A1FF for significant content areas, subheadings, or distinct sections, offering a rich, supporting electric blue hue.

accent

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

background

A dark background (like a charcoal or black, not in palette) would allow these colors to truly pop. #FFFFFF can be used for clean, contrasting sections.

text

On dark colors like #5A009C, use #FFFFFF for optimal readability. On #FFFFFF, a crisp black or deep charcoal provides excellent contrast. For other vibrant colors, careful contrast checks are essential.

Accessibility notes

Ensure strong contrast when using #FF0088 or #FFD700 for text against any of the other vibrant colors; #FFFFFF text on #5A009C is good.
Avoid using #00A1FF as text on #FF0088 due to potential low contrast for some users; reserve for larger UI elements.
Test color combinations for readability, especially for users with visual impairments, as bright, clashing colors can be challenging.
The #FFFFFF offers excellent contrast against all darker colors in the palette for accessible text.

Recommended combinations

Cosmic Core Burst

Creates a dramatic, high-contrast visual, ideal for energetic backgrounds or powerful focal points in design.

#5A009C · #00A1FF · #FF0088

Ray Glow

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

#00A1FF · #FFD700 · #FFFFFF

Explosion Contrast

Excellent for establishing clear visual hierarchy, with a brilliant white highlight against a deep violet, accented by gold.

#5A009C · #FFFFFF · #FFD700

CSS variables

:root {
  --cosmic-ray-burst-1: #5A009C;
  --cosmic-ray-burst-2: #00A1FF;
  --cosmic-ray-burst-3: #FF0088;
  --cosmic-ray-burst-4: #FFD700;
  --cosmic-ray-burst-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-ray-burst": {
        1: "#5A009C",
        2: "#00A1FF",
        3: "#FF0088",
        4: "#FFD700",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#5A009C

Color 2#00A1FF

Color 3#FF0088

Color 4#FFD700

Color 5#FFFFFF

Accessibility

Contrast checker

3.9:1AA18

2.9:1Fail

7.8:1AAA

11:1AAA

3.9:1AA18

1.3:1Fail

2:1Fail

2.8:1Fail

2.9:1Fail

1.3:1Fail

2.7:1Fail

3.7:1AA18

7.8:1AAA

2:1Fail

2.7:1Fail

1.4:1Fail

11:1AAA

2.8:1Fail

3.7:1AA18

1.4:1Fail

Similar palettes

More like Cosmic Ray Burst

Celestial Aurora Burst

City Neon Pulse