Palette

Neon Alley Surge

A high-energy blast of electric colors from a futuristic urban street at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A0A3D#6F00FF#00FFFF#FF00FF#FCF921

Palette guide

How to use Neon Alley Surge

Overview

The "Neon Alley Surge" palette delivers an electrifying punch of futuristic energy, contrasting deep purples with intensely bright neons. It features a profound dark purple (#2A0A3D), a rich electric violet (#6F00FF), brilliant cyan (#00FFFF), intense magenta (#FF00FF), and a luminous yellow (#FCF921). This palette is perfectly crafted for designers and developers aiming to evoke a high-energy, urban night aesthetic with a distinct cyberpunk edge. The dark anchor allows the vibrant hues to truly pop, making it ideal for dynamic UI elements, eye-catching branding, and digital art that needs to convey both depth and dazzling light.

Best used for

Futuristic game UI and cinematic visuals
High-tech product showcases
Electronic music event promotions
Cyberpunk fashion and merchandise
Dynamic digital advertising
Dark theme web applications

Suggested color roles

primary

#2A0A3D (Profound Dark Purple) - Serves as the deep, grounding background color, providing contrast for the bright neons.

secondary

#6F00FF (Electric Violet) - Excellent for secondary sections, large interactive areas, or subtle glowing accents.

accent

#FCF921 (Luminous Yellow) - Use sparingly for critical alerts, small icons, or to draw immediate attention to key features.

background

#2A0A3D (Profound Dark Purple) - The main backdrop, allowing the lighter, more vibrant colors to surge forward.

text

#00FFFF (Brilliant Cyan) or white - For headings and important text against dark backgrounds; a near-white for body copy for optimal readability.

Accessibility notes

Ensure text in #00FFFF, #FF00FF, or #FCF921 has sufficient contrast against the dark background colors like #2A0A3D and #6F00FF.
Avoid using #6F00FF for small text on #2A0A3D as contrast may be insufficient.
Always test color combinations for WCAG AA compliance, especially for text and interactive elements.
Be mindful of the intensity of the bright colors and consider a less vibrant alternative for extended reading if necessary.

Recommended combinations

Deep Voltage

Creates a rich, layered dark theme with prominent magenta highlights.

#2A0A3D · #6F00FF · #FF00FF

Cyber Pulse

Ideal for dynamic animations or glowing elements, capturing raw electric energy.

#00FFFF · #FF00FF · #FCF921

Urban Glow

A striking combination for dark mode UI, where yellow provides critical accents against cyan.

#2A0A3D · #00FFFF · #FCF921

CSS variables

:root {
  --neon-alley-surge-3-1: #2A0A3D;
  --neon-alley-surge-3-2: #6F00FF;
  --neon-alley-surge-3-3: #00FFFF;
  --neon-alley-surge-3-4: #FF00FF;
  --neon-alley-surge-3-5: #FCF921;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-alley-surge-3": {
        1: "#2A0A3D",
        2: "#6F00FF",
        3: "#00FFFF",
        4: "#FF00FF",
        5: "#FCF921",
      }
    }
  }
}

Hex values

Color 1#2A0A3D

Color 2#6F00FF

Color 3#00FFFF

Color 4#FF00FF

Color 5#FCF921

Accessibility

Contrast checker

2.6:1Fail

13.8:1AAA

5.5:1AA

15.5:1AAA

2.6:1Fail

5.4:1AA

2.1:1Fail

6:1AA

13.8:1AAA

5.4:1AA

2.5:1Fail

1.1:1Fail

5.5:1AA

2.1:1Fail

2.5:1Fail

2.8:1Fail

15.5:1AAA

6:1AA

1.1:1Fail

2.8:1Fail

Similar palettes

More like Neon Alley Surge