Palette

Neon Urban Pulse

Blindingly bright and synthetic colors capture the frenetic, artificial energy 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 Neon Urban 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 Urban Pulse.

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

Data visualization

#00FFFF#FF00FF#FFFF00#00FF00#8A2BE2

Palette guide

How to use Neon Urban Pulse

Overview

The Neon Urban Pulse palette delivers a blindingly bright and synthetic burst of color, perfectly capturing the frenetic energy of a futuristic cityscape at night. Featuring the striking trio of #00FFFF (Cyan), #FF00FF (Magenta), and #FFFF00 (Yellow), alongside the vibrant #00FF00 (Lime Green), this palette is designed for maximum impact. The inclusion of #8A2BE2 (Blue Violet) provides a rich, electric depth that grounds the intense neons. This palette is incredibly useful for designers seeking to create dynamic, high-energy interfaces, branding, or digital art that embodies a bold, modern, and unequivocally vibrant urban aesthetic.

Best used for

Futuristic game UI/UX
Electronic music event branding
High-energy digital advertisements
Vibrant web design headers
Motion graphics and animated logos
Urban-themed digital illustrations

Suggested color roles

primary

Utilize #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 very 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 Flash

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

#00FFFF · #FF00FF · #FFFF00

Electric Vibe

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

#00FF00 · #8A2BE2 · #FF00FF

Urban Grid

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

#FFFF00 · #00FFFF · #8A2BE2

CSS variables

:root {
  --neon-urban-pulse-2-1: #00FFFF;
  --neon-urban-pulse-2-2: #FF00FF;
  --neon-urban-pulse-2-3: #FFFF00;
  --neon-urban-pulse-2-4: #00FF00;
  --neon-urban-pulse-2-5: #8A2BE2;
}

Tailwind config

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

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#00FF00

Color 5#8A2BE2

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.1:1Fail

4.8:1AA

2.5:1Fail

2.9:1Fail

2.3:1Fail

1.9:1Fail

1.2:1Fail

2.9:1Fail

1.3:1Fail

5.5:1AA

1.1:1Fail

2.3:1Fail

1.3:1Fail

4.3:1AA18

4.8:1AA

1.9:1Fail

5.5:1AA

4.3:1AA18

Similar palettes

More like Neon Urban Pulse

Electric Future Drive

Electric Metro Glow

Electric Sunset Glow