Palette

Cyberpunk Metropolis

A striking contrast of electric neons against deep, brooding darks, inspired by a dystopian future city.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#000000#6A5ACD#8A2BE2

Palette guide

How to use Cyberpunk Metropolis

Overview

The "Cyberpunk Metropolis" palette presents a striking contrast of electric neons against deep, brooding darks, inspired by a dystopian future city. This collection features #00FFFF (cyan), #FF00FF (magenta), #000000 (pure black), #6A5ACD (slate blue), and #8A2BE2 (blue violet). 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 #8A2BE2 (Blue Violet) 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 #6A5ACD or #8A2BE2 for small body text on darker backgrounds; aim for significant luminance difference.
Test color combinations for color blindness, especially with #6A5ACD (slate blue) and #8A2BE2 (blue violet).
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.

#6A5ACD · #8A2BE2 · #000000

Urban Glitch

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

#FF00FF · #00FFFF · #8A2BE2

CSS variables

:root {
  --cyberpunk-metropolis-1: #00FFFF;
  --cyberpunk-metropolis-2: #FF00FF;
  --cyberpunk-metropolis-3: #000000;
  --cyberpunk-metropolis-4: #6A5ACD;
  --cyberpunk-metropolis-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-metropolis": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#000000",
        4: "#6A5ACD",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#000000

Color 4#6A5ACD

Color 5#8A2BE2

Accessibility

Contrast checker

2.5:1Fail

16.7:1AAA

4.2:1AA18

4.8:1AA

2.5:1Fail

6.7:1AA

1.7:1Fail

1.9:1Fail

16.7:1AAA

6.7:1AA

4:1AA18

3.5:1AA18

4.2:1AA18

1.7:1Fail

4:1AA18

1.1:1Fail

4.8:1AA

1.9:1Fail

3.5:1AA18

1.1:1Fail

Similar palettes

More like Cyberpunk Metropolis

Digital Synthwave Haze

Midnight City Glare