Back to palettes

Palette

Cyberpunk City Pulse

Bold, electric colors straight from a futuristic city's neon-lit alleys and digital glow.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyberpunk City Pulse 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 City Pulse.

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

Data visualization

#FF00FF#00FFFF#FFD700#39FF14#4B0082

Palette guide

How to use Cyberpunk City Pulse

Overview

The "Cyberpunk City Pulse" palette bursts with bold, electric colors straight from a futuristic city's neon-lit alleys and digital glow. This vibrant collection features #FF00FF (magenta), #00FFFF (cyan), #FFD700 (gold), #39FF14 (electric green), and #4B0082 (dark indigo). It's an exceptional choice for designers aiming to convey an energetic, dynamic, and visually aggressive mood. Developers will find these colors highly effective for creating distinct UI elements, urgent notifications, and captivating visual effects in games or applications. The strong contrast ensures that key elements pop, making this palette ideal for interfaces that demand attention and a compelling, immersive user experience that vibrates with digital energy.

Best used for

  • Sci-fi game HUDs and UI elements
  • Futuristic web and app design
  • Digital art and graphic novels
  • Event branding for tech or gaming conventions
  • 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 #FFD700 (Gold) for energetic highlights, warning indicators, or elements needing a sharp, luxurious pop.

background

Use #4B0082 (Dark Indigo) as a deep, mysterious background that allows the vivid neons to truly pop and create depth.

text

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

Accessibility notes

  • Ensure very high contrast when placing any neon color text on other bright neons or medium tones like #4B0082.
  • Avoid using #39FF14 or #FFD700 for small body text; they are best reserved for larger headings or accents.
  • Test color combinations for color blindness, especially between #39FF14 (green) and #FFD700 (gold).
  • Pair these vibrant colors with a very dark background to enhance readability and reduce visual strain.

Recommended combinations

Electric Circuit

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

#00FFFF · #FF00FF · #4B0082

Tech Surge

Ideal for energetic data visualizations, progress bars, or highlighting key information in a tech interface.

#FFD700 · #39FF14 · #00FFFF

Urban Glitch

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

#FF00FF · #39FF14 · #FFD700

CSS variables

:root {
  --cyberpunk-city-pulse-1: #FF00FF;
  --cyberpunk-city-pulse-2: #00FFFF;
  --cyberpunk-city-pulse-3: #FFD700;
  --cyberpunk-city-pulse-4: #39FF14;
  --cyberpunk-city-pulse-5: #4B0082;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-city-pulse": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFD700",
        4: "#39FF14",
        5: "#4B0082",
      }
    }
  }
}

Related searches

cyberpunk neon palettefuturistic city colorsvibrant digital aestheticmagenta cyan gold green schemedynamic UI glow

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#FFD700
·
Color 4#39FF14
·
Color 5#4B0082
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.2:1Fail
2.3:1Fail
4.1:1AA18
2
2.5:1Fail
1.1:1Fail
1.1:1Fail
10.3:1AAA
3
2.2:1Fail
1.1:1Fail
1:1Fail
9.2:1AAA
4
2.3:1Fail
1.1:1Fail
1:1Fail
9.6:1AAA
5
4.1:1AA18
10.3:1AAA
9.2:1AAA
9.6:1AAA

Similar palettes

More like Cyberpunk City Pulse

View all vibrant
Cyberpunk Pulse Wave
Cyberpunk Street Beat
Cyber Alley Glow
Cyber Glow Synth
Cyberpunk Alley Light
Cyberpunk Glitch Neon