Back to palettes

Palette

Neon Urban Pulse

Electric hues that capture the frantic energy and artificial brilliance of a futuristic city 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

#FF00FF#00FFFF#FFFF00#39FF14#FF1493

Palette guide

How to use Neon Urban Pulse

Overview

The Neon Urban Pulse palette captures the frantic energy and artificial brilliance of a futuristic city night with electrifying hues. This collection features a powerful quartet of pure neons: #FF00FF (Magenta), #00FFFF (Cyan), #FFFF00 (Yellow), and #39FF14 (Lime Green). The addition of #FF1493 (Deep Pink) offers a slightly warmer, yet equally intense, counterpoint, adding depth and versatility. Designers can leverage these vibrant colors to create dynamic interfaces, impactful branding, or captivating digital art that demands attention and evokes a sense of modern, high-tech urbanism. It's a go-to palette for projects seeking a bold, unforgettable aesthetic.

Best used for

  • Cyberpunk game UI/UX
  • Electronic music album covers
  • High-tech product branding
  • Vibrant event posters
  • Motion graphics and VFX
  • Digital art with a futuristic glow

Suggested color roles

primary

Use #FF00FF (Magenta) for dominant calls-to-action or hero sections to establish a bold, energetic presence.

secondary

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

accent

Leverage #FFFF00 (Yellow) and #39FF14 (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 #00FFFF 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 Lights

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

#FF00FF · #00FFFF · #FFFF00

Electric Grid

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

#39FF14 · #FF1493 · #FF00FF

Urban Flow

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

#FFFF00 · #00FFFF · #FF1493

CSS variables

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

Tailwind config

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

Related searches

futuristic city neon colorscyberpunk vibrant paletteelectric urban designhigh energy UI colorsmagenta cyan yellow green

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#FFFF00
·
Color 4#39FF14
·
Color 5#FF1493
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.9:1Fail
2.3:1Fail
1.2:1Fail
2
2.5:1Fail
1.2:1Fail
1.1:1Fail
2.9:1Fail
3
2.9:1Fail
1.2:1Fail
1.3:1Fail
3.4:1AA18
4
2.3:1Fail
1.1:1Fail
1.3:1Fail
2.7:1Fail
5
1.2:1Fail
2.9:1Fail
3.4:1AA18
2.7:1Fail

Similar palettes

More like Neon Urban Pulse

View all Vibrant