Back to palettes

Palette

Cyberpunk City

Electrifying and unconventional colors, depicting a high-tech, glowing 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 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.

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

Data visualization

#00FF00#00FFFF#FF00FF#8A2BE2#00BFFF

Palette guide

How to use Cyberpunk City

Overview

The "Cyberpunk City" palette delivers electrifying and unconventional colors, perfectly depicting a high-tech, glowing cityscape at night. This vibrant collection features #00FF00 (lime green), #00FFFF (cyan), #FF00FF (magenta), #8A2BE2 (blue violet), and #00BFFF (deep sky blue). It's an exceptional choice for designers aiming to convey an energetic, dynamic, and visually aggressive mood. Developers will find these colors highly effective for creating distinct UI elements, urgent notifications, and captivating visual effects in games or applications. The strong contrast ensures that key elements pop, making this palette ideal for interfaces that demand attention and a compelling, immersive user experience that vibrates with digital energy.

Best used for

  • Sci-fi game HUDs and UI elements
  • Futuristic web and app design
  • Digital art and graphic novels
  • Event branding for tech or gaming conventions
  • Motion graphics and visual effects
  • High-energy marketing campaigns

Suggested color roles

primary

Utilize #00FFFF (Cyan) for main interactive elements, primary branding, or prominent headings to establish a clear focal point.

secondary

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

accent

Employ #00FF00 (Lime Green) for energetic highlights, warning indicators, or elements needing a sharp, vibrant pop.

background

A deep charcoal or black (#000000) is recommended as a background to make these vivid neons truly pop and create depth.

text

For general legibility on dark backgrounds, use white (#FFFFFF) or very light gray. For impactful headings, #00FFFF or #00BFFF are strong choices.

Accessibility notes

  • Ensure very high contrast when placing any neon color text on other bright neons or medium tones like #8A2BE2.
  • Avoid using #00FF00 or #FF00FF for small body text; they are best reserved for larger headings or accents.
  • Test color combinations for color blindness, especially between #00FF00 (green) and #00BFFF (deep sky blue).
  • Pair these vibrant colors with a very dark background to enhance readability and reduce visual strain.

Recommended combinations

Electric Circuit

Excellent for creating dynamic gradients, interactive button states, or glowing UI elements and data displays.

#00FFFF · #FF00FF · #00FF00

Tech Surge

Ideal for atmospheric backgrounds, digital skies, or subtle futuristic gradients in a tech interface.

#8A2BE2 · #00BFFF · #00FFFF

Urban Glitch

Perfect for abstract backgrounds, dramatic lighting effects, or atmospheric elements in digital art.

#FF00FF · #00FF00 · #00BFFF

CSS variables

:root {
  --cyberpunk-city-1: #00FF00;
  --cyberpunk-city-2: #00FFFF;
  --cyberpunk-city-3: #FF00FF;
  --cyberpunk-city-4: #8A2BE2;
  --cyberpunk-city-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-city": {
        1: "#00FF00",
        2: "#00FFFF",
        3: "#FF00FF",
        4: "#8A2BE2",
        5: "#00BFFF",
      }
    }
  }
}

Related searches

cyberpunk neon palettefuturistic city colorsvibrant digital aestheticmagenta cyan green schemedynamic UI glow

Palette colors

Hex values

Color 1#00FF00
·
Color 2#00FFFF
·
Color 3#FF00FF
·
Color 4#8A2BE2
·
Color 5#00BFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2.3:1Fail
4.3:1AA18
1.5:1Fail
2
1.1:1Fail
2.5:1Fail
4.8:1AA
1.7:1Fail
3
2.3:1Fail
2.5:1Fail
1.9:1Fail
1.5:1Fail
4
4.3:1AA18
4.8:1AA
1.9:1Fail
2.8:1Fail
5
1.5:1Fail
1.7:1Fail
1.5:1Fail
2.8:1Fail

Similar palettes

More like Cyberpunk City

View all vibrant
Cybernetic Funk
Cyber City Synth
Cybernetic Future Glow
Cybernetic Glow Grid
Cyberpunk Circuit Pulse
Cyberpunk Glitch Neon