Back to palettes

Palette

Cyberpunk City Glow

Electric, futuristic hues reminiscent of a bustling cyberpunk cityscape at night.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#FFFF00#3A00FF#000000

Palette guide

How to use Cyberpunk City Glow

Overview

The "Cyberpunk City Glow" palette offers electric, futuristic hues reminiscent of a bustling cyberpunk cityscape at night. Built on a foundation of #000000 (pure black), this palette features intensely vibrant neons: #00FFFF (cyan), #FF00FF (magenta), #FFFF00 (bright yellow), and #3A00FF (electric blue). This combination is perfect for designers who want to create visually aggressive, energetic, and undeniably modern designs. Developers will find these colors exceptionally useful for creating impactful UI elements, urgent alerts, and dynamic visual effects that demand attention. The extreme contrast ensures every element pops, making this palette ideal for interfaces that require a bold, striking, and memorable user experience.

Best used for

  • Gaming UI and HUDs
  • Sci-fi cinematic titles and graphics
  • High-energy event posters and flyers
  • Digital art with a stark, neon theme
  • Dark mode application designs
  • Futuristic product advertisements

Suggested color roles

primary

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

secondary

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

accent

Employ #FFFF00 (Bright Yellow) for energetic highlights, warning indicators, or elements needing maximum pop and visibility.

background

Use #000000 (Pure Black) as the dominant background, providing the ultimate canvas for the intense neon colors to glow.

text

For optimal legibility on the black background, use white (#FFFFFF) or #00FFFF for headings and key information. Avoid using #FFFF00 for small body text.

Accessibility notes

  • Ensure extremely high contrast ratios for text and important UI elements against the #000000 background.
  • Avoid using #FFFF00 or #3A00FF for small body text; they are best reserved for larger headings or accents.
  • Test color combinations for color blindness, particularly with yellow and blue hues, to ensure distinguishability.
  • The stark contrast of bright neons on pure black can cause visual fatigue if overused; apply strategically.

Recommended combinations

City Blackout

Excellent for creating high-contrast UI elements, glowing text, or dramatic background effects.

#00FFFF · #FF00FF · #000000

Electric Glitch

Ideal for energetic data visualizations, warning indicators, or digital glitch effects in motion.

#FFFF00 · #3A00FF · #000000

Neon Pulse

Perfect for vibrant gradients, interactive states, or highlighting key features in a futuristic interface.

#FF00FF · #00FFFF · #FFFF00

CSS variables

:root {
  --cyberpunk-city-glow-1: #00FFFF;
  --cyberpunk-city-glow-2: #FF00FF;
  --cyberpunk-city-glow-3: #FFFF00;
  --cyberpunk-city-glow-4: #3A00FF;
  --cyberpunk-city-glow-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-city-glow": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#3A00FF",
        5: "#000000",
      }
    }
  }
}

Related searches

cyberpunk black neonhigh contrast futuristic paletteelectric yellow magenta bluedark mode sci-fi colorsurban tech aesthetic

Palette colors

Hex values

Color 1#00FFFF
·
Color 2#FF00FF
·
Color 3#FFFF00
·
Color 4#3A00FF
·
Color 5#000000
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
1.2:1Fail
6.4:1AA
16.7:1AAA
2
2.5:1Fail
2.9:1Fail
2.6:1Fail
6.7:1AA
3
1.2:1Fail
2.9:1Fail
7.5:1AAA
19.6:1AAA
4
6.4:1AA
2.6:1Fail
7.5:1AAA
2.6:1Fail
5
16.7:1AAA
6.7:1AA
19.6:1AAA
2.6:1Fail

Similar palettes

More like Cyberpunk City Glow

View all vibrant
Cyberpunk Street Haze
Cybernetic Urban Glow
Cyberpunk City Lights
Neon Alley Pulse
Neon Alley Thrill
Neon Skyline