Back to palettes

Palette

Cyberpunk Electric Surge

An electrifying palette channeling the intense, glowing lights of a futuristic cityscape at night.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyberpunk Electric Surge 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 Cyberpunk Electric Surge.

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

Data visualization

#FF00FF#00FFFF#FFFF00#FF69B4#8A2BE2

Palette guide

How to use Cyberpunk Electric Surge

Overview

The "Cyberpunk Electric Surge" palette is an electrifying collection channeling the intense, glowing lights of a futuristic cityscape at night. Featuring #FF00FF (magenta), #00FFFF (cyan), #FFFF00 (bright yellow), #FF69B4 (hot pink), and #8A2BE2 (blue violet), this palette is inherently dynamic and bold. It's an excellent choice for designers aiming to convey a sense of high-tech urgency and vibrant urban life. Developers will find these colors incredibly effective for creating distinct interactive states, urgent notifications, and visually engaging data displays. The strong contrasts ensure that key elements always stand out, making it ideal for interfaces that demand attention and a compelling, energetic user experience, echoing a retro-futuristic vibe.

Best used for

  • Sci-fi game HUDs and UI elements
  • Retro-futuristic web and app design
  • Digital art and graphic novels
  • Event branding for synthwave or electronic music
  • Motion graphics and visual effects
  • High-energy marketing campaigns

Suggested color roles

primary

Utilize #00FFFF (Cyan) for main interactive elements, primary branding, or prominent headings to establish a clear focal point.

secondary

Apply #FF00FF (Magenta) for secondary calls to action, important notifications, or vibrant accents that demand attention.

accent

Employ #FFFF00 (Bright Yellow) for energetic highlights, warning indicators, or elements needing a sharp, luminous pop.

background

A deep charcoal or black (#000000) is recommended as a background to make these vivid neons truly pop and create depth.

text

For general legibility on dark backgrounds, use white (#FFFFFF) or very light gray. For impactful headings, #00FFFF or #FF00FF are strong choices.

Accessibility notes

  • Ensure very high contrast when placing any neon color text on other bright neons or medium tones like #8A2BE2.
  • Avoid using #FFFF00 or #FF69B4 for small body text; they are best reserved for larger headings or accents.
  • Test color combinations for color blindness, especially between #FF69B4 (hot pink) and #FF00FF (magenta).
  • Pair these vibrant colors with a very dark background to enhance readability and reduce visual strain.

Recommended combinations

Neon Flare

Excellent for creating dynamic gradients, interactive button states, or glowing UI elements and data displays.

#00FFFF · #FF00FF · #FFFF00

Synthwave Pulse

Ideal for atmospheric backgrounds, digital skies, or subtle futuristic gradients in a tech interface.

#FF69B4 · #8A2BE2 · #00FFFF

Urban Glitch

Perfect for abstract backgrounds, dramatic lighting effects, or atmospheric elements in digital art.

#FF00FF · #FFFF00 · #8A2BE2

CSS variables

:root {
  --cyberpunk-electric-surge-1: #FF00FF;
  --cyberpunk-electric-surge-2: #00FFFF;
  --cyberpunk-electric-surge-3: #FFFF00;
  --cyberpunk-electric-surge-4: #FF69B4;
  --cyberpunk-electric-surge-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-electric-surge": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#FF69B4",
        5: "#8A2BE2",
      }
    }
  }
}

Related searches

cyberpunk neon palettefuturistic city colorsvibrant digital aestheticmagenta cyan yellow schemedynamic UI glow

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#FFFF00
·
Color 4#FF69B4
·
Color 5#8A2BE2
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.9:1Fail
1.2:1Fail
1.9:1Fail
2
2.5:1Fail
1.2:1Fail
2.1:1Fail
4.8:1AA
3
2.9:1Fail
1.2:1Fail
2.5:1Fail
5.5:1AA
4
1.2:1Fail
2.1:1Fail
2.5:1Fail
2.3:1Fail
5
1.9:1Fail
4.8:1AA
5.5:1AA
2.3:1Fail

Similar palettes

More like Cyberpunk Electric Surge

View all vibrant
Cyber Glow Graffiti
Electric Sunset Vapor
Fluorescent Alley Beat
Neon Synthwave Wave
City Lights Energy
Cyber Glow Spectrum