Back to palettes

Palette

Cyberpunk Alley Glow

A striking contrast of electric neon lights against the dark backdrop of a futuristic city alley.

VibrantEnergetic5 colors
More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F0F#00FFBB#FF00FF#3300FF#CCEE00

Palette guide

How to use Cyberpunk Alley Glow

Overview

The "Cyberpunk Alley Glow" palette delivers a striking contrast of electric neon lights against the deep backdrop of a futuristic city alley. With a dominant #0F0F0F (very dark gray) providing a shadowy foundation, this palette erupts with vibrant hues like #00FFBB (electric teal), #FF00FF (magenta), #3300FF (deep electric blue), and #CCEE00 (lime yellow). It's an ideal choice for designers aiming to evoke an energetic, high-tech, and slightly dystopian mood. Developers can leverage these distinct colors for dynamic UI states, captivating game environments, or impactful data visualizations. The strong contrast ensures visual elements stand out, making this palette perfect for applications requiring an edgy, modern, and visually compelling user experience.

Best used for

  • Sci-fi game interfaces and HUDs
  • Futuristic website design
  • Digital art and concept visuals
  • Event branding for tech conventions
  • Motion graphics and animated logos
  • Dark mode application themes

Suggested color roles

primary

Utilize #00FFBB (Electric Teal) for primary interactive elements, brand highlights, or key information to draw attention.

secondary

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

accent

Employ #CCEE00 (Lime Yellow) for energetic highlights, warning indicators, or elements needing a sharp pop.

background

Use #0F0F0F (Very Dark Gray) as the foundational background, allowing the neon colors to intensely glow and define the space.

text

For general legibility on dark backgrounds, use white (#FFFFFF) or a very light gray. For headings, #00FFBB or #FF00FF can be highly effective.

Accessibility notes

  • Ensure high contrast ratios for text and important UI elements, especially when using #CCEE00 on dark backgrounds.
  • Avoid using the bright neons (#00FFBB, #FF00FF, #3300FF, #CCEE00) for small body text due to potential eye strain.
  • Test color combinations for color blindness to ensure all users can distinguish key information.
  • The dark background #0F0F0F is excellent for visual comfort but ensure text colors have sufficient luminance.

Recommended combinations

Electric Dusk

Excellent for creating atmospheric backgrounds, digital skies, or subtle futuristic gradients.

#00FFBB · #3300FF · #0F0F0F

Neon Flare

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

#FF00FF · #CCEE00 · #0F0F0F

Deep Circuit

Perfect for glowing outlines, interactive states, or complex data displays in a tech interface.

#00FFBB · #FF00FF · #3300FF

CSS variables

:root {
  --cyberpunk-alley-glow-1: #0F0F0F;
  --cyberpunk-alley-glow-2: #00FFBB;
  --cyberpunk-alley-glow-3: #FF00FF;
  --cyberpunk-alley-glow-4: #3300FF;
  --cyberpunk-alley-glow-5: #CCEE00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-alley-glow": {
        1: "#0F0F0F",
        2: "#00FFBB",
        3: "#FF00FF",
        4: "#3300FF",
        5: "#CCEE00",
      }
    }
  }
}

Related searches

cyberpunk neon palettedark electric colorsfuturistic UI glowvibrant city lights designmagenta teal yellow scheme

Palette colors

Hex values

Color 1#0F0F0F
·
Color 2#00FFBB
·
Color 3#FF00FF
·
Color 4#3300FF
·
Color 5#CCEE00
·

Accessibility

Contrast checker

1
2
3
4
5
1
14.6:1AAA
6.1:1AA
2.4:1Fail
14.4:1AAA
2
14.6:1AAA
2.4:1Fail
6.2:1AA
1:1Fail
3
6.1:1AA
2.4:1Fail
2.6:1Fail
2.4:1Fail
4
2.4:1Fail
6.2:1AA
2.6:1Fail
6.1:1AA
5
14.4:1AAA
1:1Fail
2.4:1Fail
6.1:1AA

Similar palettes

More like Cyberpunk Alley Glow

View all Vibrant
City Night Electric
Electric Circuit Pulse
Neon City Glimmer
Cybernetic Chroma Burst
Digital Glitch Burst
Electric City Nights