Cyberpunk color palette: neon on near black, with hex codes

A cyberpunk color palette is neon on near black: acid yellow, hot magenta, electric cyan and toxic green, set against the blue black of a city at night. The look comes from decades of science fiction about high technology and low life, so the colours feel artificial and a little dangerous. The rule that makes it work is restraint: one dominant neon, one accent, and a lot of dark.

The core cyberpunk colors

Each neon has a job. Yellow reads as industrial and urgent, like hazard tape. Red means warning. Magenta is nightlife and advertising. Cyan is interfaces, screens and data. Green is code and chemicals. Pick the neon whose job matches your message, and the palette starts telling the story for you.

Five cyberpunk palettes with hex codes

Cyberpunk colors as CSS variables

For a website, stream overlay or game interface, set the palette up as custom properties so you can swap the main neon in one place. This example uses the Night market palette with the neon kept for borders, links and one focal element.

:root {
  --ground: #141824;
  --surface: #1e2332;
  --line: #2b2f3a;
  --text: #e6e9f0;
  --muted: #9aa4b5;
  --neon: #ff2bd6;
  --accent: #00f0ff;
}

body {
  background: var(--ground);
  color: var(--text);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--neon);
}

a {
  color: var(--accent);
}

.hero {
  background:
    linear-gradient(135deg, transparent 60%, var(--neon) 140%),
    var(--ground);
}

See CSS custom properties for theming for switching palettes, and dark mode design for the general rules of building on dark grounds.

Photos in a cyberpunk palette

Ordinary photos can be pulled into the palette. Night shots of streets, rain on glass, car parks and stairwells all work once they are darkened and tinted. A duotone that maps shadows to your ground colour and highlights to your main neon turns a dull phone picture of a bus stop into something that belongs in the set. Keep the tint strong on backgrounds and gentler on faces, where a full neon duotone can look harsh. The duotone effect explains how to choose the two colours.

Keeping cyberpunk text readable

Neon on near black feels like it must be readable, and for big headlines it usually is. Problems start with small text and with the darker neons. Saturated red and blue are darker to the eye than they look: pure blue #0000ff on black fails even for large text, and warning red only just clears the bar for small text. Yellow, cyan and green are the most legible neons on dark grounds. Check pairs against the WCAG guidance explained by WebAIM before you commit.

A glow around letters is the most common cyberpunk cliché, and it is also the thing that turns text into a smudge on a phone. Let the background carry the light and keep the letters crisp. Colour contrast and accessibility covers the numbers.

Cyberpunk palettes in real designs

The look is a natural fit for gaming channels, esports teams, streamers, electronic music, tech launches and anything about the future of cities. It can also work for a bar or a late night food stall that wants to feel like a scene from a film.

1. 1

   Pick the ground first

   Blue black for tech, green black for code, warm black for nightlife. Never flat #000000.

2. 2

   Choose one neon by meaning

   Yellow for urgency, magenta for nightlife, cyan for screens, green for code, red for alerts.

3. 3

   Add one accent

   A second neon used in small amounts: a time, a price, a thin line.

4. 4

   Add grit

   Grain, scan lines or a concrete texture stop the dark areas looking like empty screen.

If your channel or team needs a cyberpunk background that is genuinely yours, you can claim a Gradiently Mark so only you can export with it, and it moves its calmest, best contrasting region behind your words by itself. Gaming channel art and esports team branding show the look applied, and synthwave colours covers the warmer, more nostalgic neighbour.