Back to palettes

Palette

Cyberpunk Alley Neon

Pulsating with electric blues, this palette channels the futuristic glow of neon signs illuminating a rain-slicked cyberpunk alley.

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#00bfff#0080ff#0040ff#0000ff

Palette guide

How to use Cyberpunk Alley Neon

Overview

Pulsating with electric blues, the "Cyberpunk Alley Neon" palette channels the futuristic glow of neon signs illuminating a rain-slicked cyberpunk alley. This monochromatic blue palette ranges from #00ffff (cyan) to #00bfff (deep sky blue), #0080ff (azure), #0040ff (royal blue), and finally #0000ff (pure blue). It's an immersive collection for designers seeking to evoke a cool, high-tech, and slightly melancholic atmosphere. Developers can utilize these progressive shades to create depth in UI elements, subtle gradients in backgrounds, or precise visual cues in complex systems. The consistent blue theme ensures coherence while offering enough variation for dynamic effects, making it perfect for interfaces that demand a sleek, futuristic, and unified aesthetic.

Best used for

  • Sci-fi UI/UX design (e.g., medical tech, data analysis)
  • Futuristic game environments and liquid effects
  • Digital art with a serene yet technological mood
  • Branding for innovative tech companies
  • Motion graphics for abstract digital flows
  • Dark mode themes requiring a cool color scheme

Suggested color roles

primary

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

secondary

Apply #00bfff (Deep Sky Blue) for secondary calls to action, important notifications, or supporting visual elements.

accent

Employ #0040ff (Royal Blue) for subtle highlights, interactive states, or to add depth within blue gradients.

background

Use #0000ff (Pure Blue) or a very dark gray/black as a foundational background, allowing lighter blues to glow.

text

For optimal legibility, use white (#FFFFFF) or a very light gray. For headings, #00ffff can be highly effective on darker blues.

Accessibility notes

  • Ensure sufficient contrast between different shades of blue for text and interactive elements, especially #0040ff on #0000ff.
  • Avoid using very dark blues for small body text on darker blue backgrounds; aim for significant luminance difference.
  • Be mindful of color blindness, as distinguishing between similar blue shades can be challenging for some users.
  • The monochromatic nature can be soothing, but ensure clear visual hierarchy through variations in lightness and saturation.

Recommended combinations

Deep Current

Excellent for creating smooth blue gradients, atmospheric lighting, or flowing digital patterns.

#00FFFF · #00BFFF · #0080FF

Electric Rain

Ideal for deep-sea effects, shadowy urban scenes, or background elements with subtle depth.

#0080FF · #0040FF · #0000FF

Neon Stream

Perfect for glowing outlines, progress indicators, or interactive elements that require a vibrant pop.

#00FFFF · #0040FF · #0000FF

CSS variables

:root {
  --cyberpunk-alley-neon-1: #00ffff;
  --cyberpunk-alley-neon-2: #00bfff;
  --cyberpunk-alley-neon-3: #0080ff;
  --cyberpunk-alley-neon-4: #0040ff;
  --cyberpunk-alley-neon-5: #0000ff;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-alley-neon": {
        1: "#00ffff",
        2: "#00bfff",
        3: "#0080ff",
        4: "#0040ff",
        5: "#0000ff",
      }
    }
  }
}

Related searches

monochromatic blue cyberpunkfuturistic blue paletteneon tech aestheticdeep sky blue schemeurban blue design

Palette colors

Hex values

Color 1#00ffff
·
Color 2#00bfff
·
Color 3#0080ff
·
Color 4#0040ff
·
Color 5#0000ff
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3:1AA18
5.3:1AA
6.9:1AA
2
1.7:1Fail
1.8:1Fail
3.1:1AA18
4:1AA18
3
3:1AA18
1.8:1Fail
1.7:1Fail
2.3:1Fail
4
5.3:1AA
3.1:1AA18
1.7:1Fail
1.3:1Fail
5
6.9:1AA
4:1AA18
2.3:1Fail
1.3:1Fail

Similar palettes

More like Cyberpunk Alley Neon

View all vibrant
Cyber Glow Graffiti
Cyber City Synth
Cyber Grid Flash
Cyber Neon Pulse
Cyber Orchid Glow
Cybernetic Circuit Glow