Palette

Digital Plasma Burst

Explosive electric blues, greens, and vibrant pinks create a dynamic, futuristic digital plasma effect.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Digital Plasma 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 Digital Plasma Burst.

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

Data visualization

#00FFD0#2CFF5D#FF00FF#FF0080#8A2BE2

Palette guide

How to use Digital Plasma Burst

Overview

The Digital Plasma Burst palette features explosive electric blues, greens, and vibrant pinks, creating a dynamic, futuristic digital plasma effect. With electric teal (#00FFD0), vibrant green (#2CFF5D), brilliant magenta (#FF00FF), hot pink (#FF0080), and royal violet (#8A2BE2), this palette is perfect for designers and developers creating projects with a cyberpunk, electric, or modern tech aesthetic. Its high saturation and diverse hues make it ideal for dynamic user interfaces, engaging game environments, or bold branding that stands out. The interplay of cool and warm neons offers a sophisticated yet energetic visual experience, reminiscent of glowing energy fields.

Best used for

Cyberpunk game interfaces
Electronic music album art
Tech startup branding
Abstract digital art
Motion graphics and VFX
Futuristic event promotions

Suggested color roles

primary

Use #00FFD0 or #2CFF5D for dominant interactive elements or large graphical areas, providing a strong visual anchor.

secondary

Employ #FF00FF or #FF0080 for secondary actions, highlights, or to add a burst of energetic contrast.

accent

Apply #8A2BE2 for subtle depth, background elements, or to provide a sophisticated counterpoint to the neons.

background

A dark charcoal or black (not included in palette) background will maximize the luminosity of these vibrant colors.

text

For text against dark backgrounds, #00FFD0, #2CFF5D, or #FF00FF offer excellent readability and a futuristic feel.

Accessibility notes

Ensure sufficient contrast for all text, especially when using neon colors on other bright colors or against medium tones.
Avoid using #FF00FF on #FF0080 or similar bright pairings for small text due to potential readability issues.
The intensity of these colors can be overwhelming; use them strategically for emphasis and not for large blocks of content.
Test color combinations for users with color vision deficiencies, as the vibrant spectrum might pose challenges.

Recommended combinations

Plasma Core

Ideal for main UI elements, headers, and backgrounds, offering a vibrant yet harmonious digital feel.

#00FFD0 · #2CFF5D · #FF00FF

Energy Burst

Excellent for highlights, status indicators, or to create a dynamic and energetic visual effect.

#FF0080 · #2CFF5D · #8A2BE2

Electric Flow

Suitable for atmospheric backgrounds, subtle gradients, or decorative elements that require depth and vibrancy.

#00FFD0 · #FF00FF · #8A2BE2

CSS variables

:root {
  --digital-plasma-burst-1: #00FFD0;
  --digital-plasma-burst-2: #2CFF5D;
  --digital-plasma-burst-3: #FF00FF;
  --digital-plasma-burst-4: #FF0080;
  --digital-plasma-burst-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-plasma-burst": {
        1: "#00FFD0",
        2: "#2CFF5D",
        3: "#FF00FF",
        4: "#FF0080",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#00FFD0

Color 2#2CFF5D

Color 3#FF00FF

Color 4#FF0080

Color 5#8A2BE2

Accessibility

Contrast checker

1:1Fail

2.4:1Fail

2.9:1Fail

4.6:1AA

1:1Fail

2.3:1Fail

2.8:1Fail

4.4:1AA18

2.4:1Fail

2.3:1Fail

1.2:1Fail

1.9:1Fail