Back to palettes

Palette

Cyberpunk Alley Neon

A high-contrast clash of artificial lights and shadowy industrial backdrops, epitomizing a futuristic cityscape.

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

#8A2BE2#FF7F50#00CED1#1E1E1E#708090

Palette guide

How to use Cyberpunk Alley Neon

Overview

The "Cyberpunk Alley Neon" palette presents a compelling, high-contrast clash of artificial lights and shadowy industrial backdrops, epitomizing a futuristic cityscape. This palette masterfully combines vibrant neons like #FF7F50 (coral) and #00CED1 (dark turquoise) with the mysterious depth of #8A2BE2 (blue violet). Grounding these electric hues are #1E1E1E (dark gray) and #708090 (slate gray), which provide essential urban grit and texture. Designers can leverage this collection for projects requiring an edgy, energetic, and visually rich aesthetic, from game environments to app interfaces. Developers will find these colors excellent for creating distinct UI elements, atmospheric backgrounds, and impactful notifications that capture a gritty, neon-drenched mood.

Best used for

  • Dystopian game environments and character design
  • Industrial-themed UI/UX design
  • Digital art with a dark, futuristic mood
  • Sci-fi cinematic concept art
  • Urban exploration game branding
  • Music album covers for electronic genres

Suggested color roles

primary

Utilize #00CED1 (Dark Turquoise) for main interactive elements, primary branding, or prominent headings.

secondary

Apply #FF7F50 (Coral) for secondary calls to action, important notifications, or vibrant accents that create warmth.

accent

Employ #8A2BE2 (Blue Violet) for subtle glows, interactive highlights, or atmospheric background elements.

background

Use #1E1E1E (Dark Gray) as the primary background, offering a deep, shadowy canvas that allows the neons to pop.

text

For general legibility on dark backgrounds, use #708090 (Slate Gray) or white (#FFFFFF). For headings, #00CED1 or #FF7F50 are impactful.

Accessibility notes

  • Ensure sufficient contrast when using #708090 text on #1E1E1E background, especially for smaller fonts.
  • Avoid using #FF7F50 or #00CED1 directly for small body text; they are best for larger headings or accents.
  • Test combinations for color blindness, particularly with #8A2BE2 and #00CED1, to ensure distinguishability.
  • The darker background helps readability, but ensure neon text has enough luminance to be comfortable.

Recommended combinations

Industrial Glow

Excellent for creating atmospheric backgrounds, subtle digital glows, or tech interfaces in dark modes.

#00CED1 · #8A2BE2 · #1E1E1E

Neon Spark

Ideal for striking call-to-action buttons, energetic data visualizations, or spotlight effects.

#FF7F50 · #00CED1 · #1E1E1E

Alley Haze

Perfect for abstract textures, subtle gradients, or secondary informational elements with an urban feel.

#8A2BE2 · #708090 · #FF7F50

CSS variables

:root {
  --cyberpunk-alley-neon-4-1: #8A2BE2;
  --cyberpunk-alley-neon-4-2: #FF7F50;
  --cyberpunk-alley-neon-4-3: #00CED1;
  --cyberpunk-alley-neon-4-4: #1E1E1E;
  --cyberpunk-alley-neon-4-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-alley-neon-4": {
        1: "#8A2BE2",
        2: "#FF7F50",
        3: "#00CED1",
        4: "#1E1E1E",
        5: "#708090",
      }
    }
  }
}

Related searches

cyberpunk dark neon paletteindustrial tech colorscoral turquoise blue violetdystopian ui aestheticurban neon design

Palette colors

Hex values

Color 1#8A2BE2
·
Color 2#FF7F50
·
Color 3#00CED1
·
Color 4#1E1E1E
·
Color 5#708090
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
3:1AA18
2.8:1Fail
1.5:1Fail
2
2.4:1Fail
1.3:1Fail
6.7:1AA
1.6:1Fail
3
3:1AA18
1.3:1Fail
8.5:1AAA
2.1:1Fail
4
2.8:1Fail
6.7:1AA
8.5:1AAA
4.1:1AA18
5
1.5:1Fail
1.6:1Fail
2.1:1Fail
4.1:1AA18

Similar palettes

More like Cyberpunk Alley Neon

View all vibrant
Cyberpunk Alley Neon
Cyberpunk Neon Drive
Digital Glitch Chroma
Digital Glitch Pulse
Electric City Nights
Future Noir Skyline