Back to palettes

Palette

Neon Street Pulse

An electrifying mix of artificial neon lights, evoking a bustling futuristic cityscape.

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

#00FFFF#FF00FF#FFFF00#00FF00#FF69B4

Palette guide

How to use Neon Street Pulse

Overview

The Neon Street Pulse palette delivers an electrifying burst of artificial light, perfect for evoking a bustling futuristic cityscape. Dominated by pure neons like #00FFFF (Cyan), #FF00FF (Magenta), and #FFFF00 (Yellow), this palette is inherently dynamic and attention-grabbing. The inclusion of #00FF00 (Lime Green) adds another layer of vibrant energy, while #FF69B4 (Hot Pink) offers a slightly softer, yet still intense, touch. Designers can harness these colors to create stunning, high-impact visuals for UI, branding, or digital art that needs to convey energy, excitement, and a distinctly modern, artificial glow. It's a go-to for projects seeking a bold, unforgettable aesthetic.

Best used for

  • Cyberpunk game environments
  • Interactive digital advertisements
  • Music video aesthetics
  • Vibrant e-commerce promotions
  • Event branding for tech conferences
  • Fashion editorial graphics

Suggested color roles

primary

Use #00FFFF (Cyan) for dominant UI elements or calls-to-action to establish a futuristic, energetic feel.

secondary

Employ #FF00FF (Magenta) for secondary navigation, hero text, or supporting graphic elements.

accent

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

background

Deep black or very dark gray backgrounds are crucial to make these vibrant neons pop and ensure readability.

text

For body text, a crisp white or light gray is recommended. For headlines or interactive text, #FFFF00 or #00FF00 can be effective against very dark backgrounds.

Accessibility notes

  • Prioritize dark backgrounds to maximize contrast and readability for neon text elements.
  • Avoid pairing multiple highly saturated neons for small text or critical information to prevent visual strain.
  • Ensure sufficient contrast ratios for all text against backgrounds, especially for WCAG compliance.
  • Test how colors appear on different screens and lighting conditions, as vibrancy can vary.

Recommended combinations

City Glow

Excellent for dynamic gradients, futuristic interfaces, or high-energy brand elements.

#00FFFF · #FF00FF · #FFFF00

Neon Pulse

Creates a vibrant, playful yet edgy feel, great for accents or interactive components.

#00FF00 · #FF69B4 · #FF00FF

Cyber Contrast

Use for striking headlines, icon highlights, or abstract background patterns.

#FFFF00 · #00FFFF · #FF69B4

CSS variables

:root {
  --neon-street-pulse-1: #00FFFF;
  --neon-street-pulse-2: #FF00FF;
  --neon-street-pulse-3: #FFFF00;
  --neon-street-pulse-4: #00FF00;
  --neon-street-pulse-5: #FF69B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-street-pulse": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#00FF00",
        5: "#FF69B4",
      }
    }
  }
}

Related searches

futuristic neon colorsvibrant cyberpunk paletteelectric city lights schemehigh energy UI colorsmagenta cyan yellow palette

Palette colors

Hex values

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

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
1.2:1Fail
1.1:1Fail
2.1:1Fail
2
2.5:1Fail
2.9:1Fail
2.3:1Fail
1.2:1Fail
3
1.2:1Fail
2.9:1Fail
1.3:1Fail
2.5:1Fail
4
1.1:1Fail
2.3:1Fail
1.3:1Fail
1.9:1Fail
5
2.1:1Fail
1.2:1Fail
2.5:1Fail
1.9:1Fail

Similar palettes

More like Neon Street Pulse

View all vibrant