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

[Canonical HTML page](https://gradiently.design/guide/cyberpunk-colors)

Rain on concrete, signs in three alphabets, a vending machine humming in an alley. Cyberpunk colour is harsh light in a dark city. Here are five palettes with codes, and how to keep them readable.

## The short version

- A cyberpunk color palette sets one or two harsh neon colours, such as acid yellow, magenta, cyan or toxic green, against a near black ground.
- The ground in cyberpunk design is rarely pure black: blue black, green black or wet asphalt grey give the neons something to sit in.
- Cyberpunk differs from synthwave by being colder and grittier, with industrial yellows and greens instead of sunset pinks and oranges.
- Yellow, cyan and green on near black pass contrast checks easily, while pure blue fails and reds sit much closer to the line.
- Using one dominant neon and one secondary accent per design keeps cyberpunk graphics striking rather than chaotic.

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

- Night asphalt: #07080d
- Blue black: #141824
- Wet concrete: #2b2f3a
- Acid yellow: #fcee0a
- Warning red: #ff003c
- Magenta sign: #ff2bd6
- Cyan HUD: #00f0ff
- Toxic green: #39ff14

Three darks to build the city, five neons to light it. You will rarely use more than two neons in one design.

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

| Palette | Ground | Main neon | Accent |
| --- | --- | --- | --- |
| Hazard | `#07080d` | Acid yellow `#fcee0a` | Cyan `#00f0ff` |
| Night market | `#141824` | Magenta `#ff2bd6` | Cyan `#00f0ff` |
| Terminal | `#050b07` | Toxic green `#39ff14` | Pale mint `#b8ffd0` |
| Red alert | `#0d0608` | Warning red `#ff003c` | Acid yellow `#fcee0a` |
| Cold chrome | `#0b0f17` | Cyan `#00f0ff` | Steel `#9aa4b5` |

Each palette is a ground, one main neon and one accent. Use the accent for less than a tenth of the design.

- Hazard: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Night market: `linear-gradient(135deg, #141824 0%, #3a1448 50%, #ff2bd6 80%, #00f0ff 100%)`
- Terminal: `radial-gradient(circle at 80% 85%, #39ff14 0%, #0f3d16 25%, #050b07 65%)`
- Red alert: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Cold chrome: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

The same five palettes as backgrounds. The neon is pushed to an edge or corner, so most of the surface stays dark enough for words.

## 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.

```css
: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);
}
```

Body text stays a soft off white; the neons are reserved for edges, links and a single lit corner.

See [CSS custom properties for theming](https://gradiently.design/guide/css-custom-properties-theming) for switching palettes, and [dark mode design](https://gradiently.design/guide/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](https://gradiently.design/guide/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](https://webaim.org/resources/contrastchecker/) before you commit.

### Hard to read

- Long paragraphs set in magenta or red
- Neon text with a blurred glow around it
- Text over the brightest part of the neon
- Three or four neons competing in one line
- Glitch effects on every word

### Easy to read

- Body text in off white, neon for headlines
- Solid, sharp letters with no halo
- Words placed on the dark part of the ground
- One neon per design, one small accent
- Glitch on a single word or none at all

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](https://gradiently.design/guide/color-contrast-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.

A landscape thumbnail announcing Season 4 going live tonight in yellow type on a near black cyberpunk background

A YouTube thumbnail in the Hazard palette: yellow headline, dark ground, cyan for the time.

A portrait post reading Noodles until 3am in light type on a dark blue background with magenta light

A late night food post in the Night market palette, magenta kept to the background.

1. **Pick the ground first** Blue black for tech, green black for code, warm black for nightlife. Never flat #000000.
2. **Choose one neon by meaning** Yellow for urgency, magenta for nightlife, cyan for screens, green for code, red for alerts.
3. **Add one accent** A second neon used in small amounts: a time, a price, a thin line.
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](https://gradiently.design/guide/gaming-channel-art) and [esports team branding](https://gradiently.design/guide/esports-team-branding) show the look applied, and [synthwave colours](https://gradiently.design/guide/synthwave-colors) covers the warmer, more nostalgic neighbour.

## FAQ

### What colours are used in cyberpunk?

Neon acid yellow, magenta, cyan, toxic green and warning red, set against near black grounds such as blue black or wet concrete grey.

### What are the hex codes for a cyberpunk palette?

A good starting set is #07080d for the ground, #fcee0a acid yellow, #ff2bd6 magenta, #00f0ff cyan and #39ff14 toxic green.

### What is the difference between cyberpunk and synthwave colours?

Synthwave is warm and nostalgic, built around a pink and orange sunset on indigo. Cyberpunk is colder and grittier, with industrial yellows, greens and cyans on near black.

### Is neon text on black accessible?

Yellow, cyan and green on near black usually pass contrast checks easily. Pure blue fails and reds only just pass, so test every pair and keep long text off white.