Palette

Electric City Neon

Dazzling, intense colors representing the high-energy, electrifying glow of a futuristic city at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Electric City Neon 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 Electric City Neon.

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

Data visualization

#00FFFF#FF00FF#FFFF00#FF4500#9400D3

Palette guide

How to use Electric City Neon

Overview

The "Electric City Neon" palette features dazzling, intense colors representing the high-energy, electrifying glow of a futuristic city at night. It bursts with vibrant Cyan (#00FFFF), Magenta (#FF00FF), and Yellow (#FFFF00), creating a dynamic, almost overwhelming light. A fiery Orange-Red (#FF4500) adds a jolt of warmth, while a deep Dark Violet (#9400D3) grounds the palette with a mysterious, urban depth. This palette is perfect for designers creating cyberpunk, tech-noir, or energetic digital experiences that demand maximum visual impact. Developers can leverage these bold hues to build engaging, interactive UIs that feel cutting-edge and immersive.

Best used for

Cyberpunk game interfaces or marketing
Futuristic city-themed app design
Electronic music event promotions
Nightlife venue branding
Sci-fi film titles or promotional materials
Vibrant e-sports team branding

Suggested color roles

primary

#00FFFF (Cyan) - Use for main interactive elements, prominent headings, or to signify active states with high energy and a cool glow.

secondary

#FF00FF (Magenta) - Ideal for subheadings, secondary interactive elements, or vibrant background accents.

accent

#FF4500 (Orange-Red) - Perfect for urgent alerts, small icons, or highlights that demand immediate attention with a fiery burst.

background

#9400D3 (Dark Violet) - Provides a deep, mysterious background, allowing the vibrant neons to truly pop and simulate glowing effects, evoking a night city.

text

#FFFF00 (Yellow) - Offers excellent readability for text on darker backgrounds like #9400D3. Pure white or #00FFFF can also be used for headings.

Accessibility notes

Extreme brightness and saturation require careful contrast checking for text and interactive elements.
Avoid using #FFFF00 or #FF00FF for small body text due to their intense saturation and potential for eye strain.
Ensure #FFFF00 text on #9400D3 background meets WCAG contrast standards.
Prioritize using the dark violet background for most text to maximize readability against the neon.

Recommended combinations

Neon Sky

A deep violet background with glowing cyan text and magenta highlights, perfect for cyberpunk interfaces.

#9400D3 · #00FFFF · #FF00FF

City Pulse

Yellow and orange-red elements against dark violet, ideal for alerts, warnings, or dynamic status indicators.

#FFFF00 · #FF4500 · #9400D3

Electric Street

Magenta and cyan with an orange-red accent, suitable for vibrant graphics or interactive elements.

#FF00FF · #00FFFF · #FF4500

CSS variables

:root {
  --electric-city-neon-2-1: #00FFFF;
  --electric-city-neon-2-2: #FF00FF;
  --electric-city-neon-2-3: #FFFF00;
  --electric-city-neon-2-4: #FF4500;
  --electric-city-neon-2-5: #9400D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-city-neon-2": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#FF4500",
        5: "#9400D3",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#FF4500

Color 5#9400D3

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

2.7:1Fail

5.2:1AA

2.5:1Fail

2.9:1Fail

1.1:1Fail

2.1:1Fail

1.2:1Fail

2.9:1Fail

3.2:1AA18

6.1:1AA

2.7:1Fail

1.1:1Fail

3.2:1AA18

1.9:1Fail

5.2:1AA

2.1:1Fail

6.1:1AA

1.9:1Fail

Similar palettes

More like Electric City Neon

View all vibrant

Cyberpunk Alley Light

City Neon Pulse

Cyber Glow Synth

Cyberpunk Alley Neon

Cyberpunk Glitch Neon

Electric Metropolis Glow