Palette

Cyberpunk Cityscape

Stark blacks, electric blues, and vivid purples capture the gritty, neon-drenched atmosphere of a cyberpunk city.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#00FFFF#FF00FF#39FF14#800080

Palette guide

How to use Cyberpunk Cityscape

Overview

The "Cyberpunk Cityscape" palette captures the gritty, neon-drenched atmosphere of a cyberpunk city with its stark blacks, electric blues, and vivid purples. Anchored by #000000 (pure black), this palette features #00FFFF (cyan), #FF00FF (magenta), #39FF14 (electric green), and #800080 (purple). It's an exceptional choice for designers aiming to convey a sense of mystery, urban grit, and high-tech drama. Developers will find these colors highly effective for creating distinct UI elements, urgent notifications, and captivating visual effects in games or applications. The intense contrast ensures that key elements pop, making this palette ideal for interfaces that demand attention and a compelling, immersive user experience.

Best used for

Dystopian game environments and character design
Noir-themed app interfaces and dashboards
Digital art and graphic novels with a dark mood
Sci-fi cinematic concept art
Urban exploration game branding
Music album covers for electronic genres

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 add depth.

accent

Employ #39FF14 (Electric Green) for energetic highlights, warning indicators, or elements needing a sharp, vibrant pop.

background

Use #000000 (Pure Black) as the dominant background, providing a deep, shadowy canvas for the neon lights.

text

For optimal legibility on black backgrounds, use white (#FFFFFF) or very light gray. For headings, #00FFFF or #FF00FF are impactful.

Accessibility notes

Ensure very high contrast between neon colors and #000000 background for all text and interactive elements.
Avoid using #39FF14 or #FF00FF for small body text; they are best reserved for larger headings or accents.
Test color combinations for color blindness, especially with #39FF14 (green) and #800080 (purple).
The dark background helps visual comfort, but strategic use of bright neons is key to prevent visual fatigue.

Recommended combinations

Night Grid

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

#00FFFF · #FF00FF · #000000

Electric Circuit

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

#39FF14 · #800080 · #000000

Urban Glitch

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

#FF00FF · #00FFFF · #39FF14

CSS variables

:root {
  --cyberpunk-cityscape-1: #000000;
  --cyberpunk-cityscape-2: #00FFFF;
  --cyberpunk-cityscape-3: #FF00FF;
  --cyberpunk-cityscape-4: #39FF14;
  --cyberpunk-cityscape-5: #800080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-cityscape": {
        1: "#000000",
        2: "#00FFFF",
        3: "#FF00FF",
        4: "#39FF14",
        5: "#800080",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#00FFFF

Color 3#FF00FF

Color 4#39FF14

Color 5#800080

Accessibility

Contrast checker

16.7:1AAA

6.7:1AA

15.5:1AAA

2.2:1Fail

16.7:1AAA

2.5:1Fail

1.1:1Fail

7.5:1AAA

6.7:1AA

2.5:1Fail

2.3:1Fail

3:1AA18

15.5:1AAA

1.1:1Fail

2.3:1Fail

6.9:1AA

2.2:1Fail

7.5:1AAA

3:1AA18

6.9:1AA

Similar palettes

More like Cyberpunk Cityscape

Digital Synthwave Haze

Midnight City Glare