Palette

Neon Alley

A bold and electric palette inspired by the dazzling, reflective lights of a city after dark.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#FFFF00#00FF00#1E90FF

Palette guide

How to use Neon Alley

Overview

The Neon Alley palette captures the dazzling, reflective energy of a city after dark, offering a bold and electric collection perfect for high-impact designs. Featuring vivid cyan (#00FFFF), magenta (#FF00FF), brilliant yellow (#FFFF00), electric green (#00FF00), and a striking dodger blue (#1E90FF), this palette is designed to create an immersive, energetic experience. Designers and developers can leverage these vibrant hues to evoke urban nightlife, digital interfaces, or any project demanding a modern, dynamic aesthetic. Its intensity requires thoughtful application to maintain readability and visual balance.

Best used for

Urban nightlife event promotions and posters
High-energy digital interfaces and app designs
Modern gaming UIs and streaming overlays
Music festival branding and visualizers
Sci-fi themed website designs
Fashion and apparel graphic accents

Suggested color roles

primary

Use #00FFFF (Cyan) or #FF00FF (Magenta) for dominant graphical elements or large headers on dark backgrounds to establish a vibrant, futuristic tone.

secondary

Employ #FFFF00 (Yellow) for secondary navigation, interactive elements, or key information blocks to provide contrast and draw attention.

accent

Apply #00FF00 (Electric Green) sparingly for call-to-action buttons, notifications, or small decorative details, ensuring maximum pop.

background

A deep charcoal or pure black background is essential to make these neon colors truly glow and provide necessary contrast.

text

For body text, use a dark grey or black on lighter neon elements, or white/near-white on a dark background. For emphasis, use #1E90FF (Dodger Blue) on dark backgrounds.

Accessibility notes

Avoid placing neon colors directly on white or light backgrounds as it severely impacts readability due to low contrast.
Ensure sufficient contrast ratios (at least AA standard) when pairing these vibrant colors for text and interactive elements.
Be mindful of colorblind users; pure neon colors can be difficult to distinguish for some, so use additional visual cues.
Reserve the brightest neons for accents or large display text, using darker, desaturated alternatives for body copy if needed.

Recommended combinations

Cyber Glow

Ideal for digital art, futuristic UIs, or motion graphics, creating a deep, glowing effect.

#00FFFF · #FF00FF · #1E90FF

Electric Pop

Excellent for playful, high-energy designs like party flyers or arcade game interfaces, offering maximum vibrancy.

#FFFF00 · #00FF00 · #FF00FF

Urban Night

Use for urban-themed branding, app splash screens, or website headers, combining cool blues with a bright focal point.

#1E90FF · #00FFFF · #FFFF00

CSS variables

:root {
  --neon-alley-1: #00FFFF;
  --neon-alley-2: #FF00FF;
  --neon-alley-3: #FFFF00;
  --neon-alley-4: #00FF00;
  --neon-alley-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-alley": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#00FF00",
        5: "#1E90FF",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#00FF00

Color 5#1E90FF

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.1:1Fail

2.6:1Fail

2.5:1Fail

2.9:1Fail

2.3:1Fail

1:1Fail

1.2:1Fail

2.9:1Fail

1.3:1Fail

3:1AA18

1.1:1Fail

2.3:1Fail

1.3:1Fail

2.4:1Fail

2.6:1Fail

1:1Fail

3:1AA18

2.4:1Fail

Similar palettes

More like Neon Alley

Abstract Expression Burst

Abstract Expression Hues