Palette

Cyberpunk Alley Neon

A high-contrast palette exploding with electric hues against a stark, urban night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyberpunk Alley 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 Cyberpunk Alley Neon.

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

Data visualization

#00FFFF#FF00FF#FFFF00#39FF14#000000

Palette guide

How to use Cyberpunk Alley Neon

Overview

The "Cyberpunk Alley Neon" palette explodes with high-contrast electric hues against a stark, urban night, embodying the ultimate futuristic aesthetic. Anchored by #000000 (pure black), this palette features intensely vibrant neons: #00FFFF (cyan), #FF00FF (magenta), #FFFF00 (bright yellow), and #39FF14 (electric green). This combination is perfect for designers who want to create visually aggressive, energetic, and undeniably modern designs. Developers will find these colors exceptionally useful for creating impactful UI elements, urgent alerts, and dynamic visual effects that demand attention. The extreme contrast ensures every element pops, making this palette ideal for interfaces that require a bold, striking, and memorable user experience.

Best used for

Gaming UI and HUDs
Sci-fi cinematic titles and graphics
High-energy event posters and flyers
Digital art with a stark, neon theme
Dark mode application designs
Futuristic product advertisements

Suggested color roles

primary

Utilize #00FFFF (Cyan) for main interactive elements, primary branding, or prominent headings.

secondary

Apply #FF00FF (Magenta) for secondary calls to action, important notifications, or vibrant accents.

accent

Employ #FFFF00 (Bright Yellow) for energetic highlights, warning indicators, or elements needing maximum pop and visibility.

background

Use #000000 (Pure Black) as the dominant background, providing the ultimate canvas for the intense neon colors to glow.

text

For optimal legibility on the black background, use white (#FFFFFF) or #00FFFF for headings and key information. Avoid using #FFFF00 for small body text.

Accessibility notes

Ensure extremely high contrast ratios for text and important UI elements against the #000000 background.
Avoid using #FFFF00 or #39FF14 for small body text; they are best reserved for larger headings or accents.
Test color combinations for color blindness, particularly with the green and yellow, to ensure distinguishability.
The stark contrast of bright neons on pure black can cause visual fatigue if overused; apply strategically.

Recommended combinations

Neon Blackout

Excellent for creating high-contrast UI elements, glowing text, or dramatic background effects.

#00FFFF · #FF00FF · #000000

Electric Glitch

Ideal for energetic data visualizations, warning indicators, or digital glitch effects in motion.

#FFFF00 · #39FF14 · #000000

Alley Pulse

Perfect for vibrant gradients, interactive states, or highlighting key features in a futuristic interface.

#FF00FF · #00FFFF · #FFFF00

CSS variables

:root {
  --cyberpunk-alley-neon-3-1: #00FFFF;
  --cyberpunk-alley-neon-3-2: #FF00FF;
  --cyberpunk-alley-neon-3-3: #FFFF00;
  --cyberpunk-alley-neon-3-4: #39FF14;
  --cyberpunk-alley-neon-3-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-alley-neon-3": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#39FF14",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#39FF14

Color 5#000000

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.1:1Fail

16.7:1AAA

2.5:1Fail

2.9:1Fail

2.3:1Fail

6.7:1AA

1.2:1Fail

2.9:1Fail

1.3:1Fail

19.6:1AAA

1.1:1Fail

2.3:1Fail

1.3:1Fail

15.5:1AAA

16.7:1AAA

6.7:1AA

19.6:1AAA

15.5:1AAA

Similar palettes

More like Cyberpunk Alley Neon

Cyberpunk Alley Neon

See it in context.

Ready when you are.

Built with Cyberpunk Alley Neon.

How to use Cyberpunk Alley Neon

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Neon Blackout

Electric Glitch

Alley Pulse

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cyberpunk Alley Neon