Palette

Neon Street Pulse

Electrifying and bright, these colors mimic the pulsating glow of futuristic city lights and digital displays.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Street 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 Neon Street Pulse.

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

Data visualization

#FF00FF#00FFFF#FFFF00#39FF14#0000FF

Palette guide

How to use Neon Street Pulse

Overview

The Neon Street Pulse palette is a jolt of pure electric energy, featuring primary neon colors that scream urban dynamism. With intense hues like #FF00FF (Magenta), #00FFFF (Cyan), #FFFF00 (Yellow), and #39FF14 (Lime Green), this collection is designed for maximum visual impact. The inclusion of #0000FF (Blue) offers a deep, foundational contrast or can be used as a powerful, saturated accent itself. This palette is incredibly useful for designers building interfaces, branding, or digital experiences that demand a bold, futuristic, and unmissable presence. Think pulsating city lights, digital displays, and high-energy marketing materials.

Best used for

Gaming UI and streaming graphics
Music festival branding
High-energy event promotions
Digital art and abstract designs
Vibrant web headers and banners
Futuristic product packaging

Suggested color roles

primary

Utilize #FF00FF (Magenta) for primary calls-to-action or dominant brand elements to command attention.

secondary

Employ #00FFFF (Cyan) for secondary navigation, important data visualizations, or as a vibrant background accent.

accent

Leverage #FFFF00 (Yellow) and #39FF14 (Lime Green) for glowing highlights, interactive states, or small, impactful details.

background

A deep black or dark charcoal background is essential to make these intense neon colors truly pop and maintain legibility.

text

For body text, use crisp white or a very light gray. For headlines or interactive text, #FFFF00 or #39FF14 can be effective against very dark backgrounds.

Accessibility notes

Extreme caution is needed for text readability; always ensure high contrast against backgrounds.
Avoid using two bright neons directly adjacent for small text or critical information.
Consider a dark, desaturated background to ground the vibrant colors and improve overall legibility.
Test for visual vibration, especially when using high-saturation colors side-by-side without sufficient separation.

Recommended combinations

Electric Sign

Ideal for bold headlines, logos, or striking UI elements against a dark backdrop.

#0000FF · #FF00FF · #FFFF00

Digital Glitch

Creates a dynamic, energetic feel for digital interfaces, loading screens, or motion graphics.

#00FFFF · #39FF14 · #FFFF00

Street Light

Excellent for creating depth and glow effects in illustrations or abstract backgrounds.

#FF00FF · #00FFFF · #0000FF

CSS variables

:root {
  --neon-street-pulse-2-1: #FF00FF;
  --neon-street-pulse-2-2: #00FFFF;
  --neon-street-pulse-2-3: #FFFF00;
  --neon-street-pulse-2-4: #39FF14;
  --neon-street-pulse-2-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-street-pulse-2": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#39FF14",
        5: "#0000FF",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFFF00

Color 4#39FF14

Color 5#0000FF

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

2.3:1Fail

2.7:1Fail

2.5:1Fail

1.2:1Fail

1.1:1Fail

6.9:1AA

2.9:1Fail

1.2:1Fail

1.3:1Fail

8:1AAA

2.3:1Fail

1.1:1Fail

1.3:1Fail

6.3:1AA

2.7:1Fail

6.9:1AA

8:1AAA

6.3:1AA

Similar palettes

More like Neon Street Pulse

View all vibrant

Cybernetic Street Grid

Cybernetic Glitch Flow

Cybernetic Pulse Beat

Cyberpunk Neon Blur

Cyberpunk Sunset

Future Metropolis Pulse