# Cyberpunk-Farbpalette: Neon auf fast Schwarz, mit Hex-Codes

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

Regen auf Beton, Leuchtschilder in drei Alphabeten, ein Automat, der in einer Gasse summt. Cyberpunk-Farbe ist grelles Licht in einer dunklen Stadt. Hier sind fünf Paletten mit Codes und wie du sie lesbar hältst.

## The short version

- Eine Cyberpunk-Farbpalette setzt ein oder zwei grelle Neonfarben wie Säuregelb, Magenta, Cyan oder Giftgrün vor einen fast schwarzen Grund.
- Der Grund im Cyberpunk-Design ist selten reines Schwarz: Blauschwarz, Grünschwarz oder nasses Asphaltgrau geben dem Neon etwas, worin es sitzen kann.
- Cyberpunk unterscheidet sich von Synthwave dadurch, dass er kälter und rauer ist, mit industriellen Gelb- und Grüntönen statt Sonnenuntergangs-Pink und -Orange.
- Gelb, Cyan und Grün auf fast Schwarz bestehen Kontrastprüfungen leicht, während reines Blau durchfällt und Rottöne deutlich näher an der Grenze liegen.
- Ein dominantes Neon und ein zweiter Akzent pro Design halten Cyberpunk-Grafiken auffällig statt chaotisch.

Eine **Cyberpunk-Farbpalette** ist Neon auf fast Schwarz: Säuregelb, heißes Magenta, elektrisches Cyan und Giftgrün, vor dem Blauschwarz einer Stadt bei Nacht. Der Look stammt aus Jahrzehnten von Science-Fiction über Hochtechnologie und niederes Leben, deshalb wirken die Farben künstlich und ein wenig gefährlich. Die Regel, die es funktionieren lässt, ist Zurückhaltung: ein dominantes Neon, ein Akzent und viel Dunkel.

## Die Kernfarben des Cyberpunk

- Nachtasphalt: #07080d
- Blauschwarz: #141824
- Nasser Beton: #2b2f3a
- Säuregelb: #fcee0a
- Warnrot: #ff003c
- Magenta-Schild: #ff2bd6
- Cyan-HUD: #00f0ff
- Giftgrün: #39ff14

Drei Dunkeltöne, um die Stadt zu bauen, fünf Neons, um sie zu beleuchten. Du wirst selten mehr als zwei Neons in einem Design nutzen.

Jedes Neon hat eine Aufgabe. Gelb wirkt industriell und dringlich, wie Warnband. Rot heißt Warnung. Magenta ist Nachtleben und Werbung. Cyan sind Oberflächen, Bildschirme und Daten. Grün sind Code und Chemikalien. Wähle das Neon, dessen Aufgabe zu deiner Botschaft passt, und die Palette beginnt, die Geschichte für dich zu erzählen.

## Fünf Cyberpunk-Paletten mit Hex-Codes

| Palette | Grund | Haupt-Neon | Akzent |
| --- | --- | --- | --- |
| Gefahr | `#07080d` | Säuregelb `#fcee0a` | Cyan `#00f0ff` |
| Nachtmarkt | `#141824` | Magenta `#ff2bd6` | Cyan `#00f0ff` |
| Terminal | `#050b07` | Giftgrün `#39ff14` | Blasse Minze `#b8ffd0` |
| Roter Alarm | `#0d0608` | Warnrot `#ff003c` | Säuregelb `#fcee0a` |
| Kaltes Chrom | `#0b0f17` | Cyan `#00f0ff` | Stahl `#9aa4b5` |

Jede Palette besteht aus einem Grund, einem Haupt-Neon und einem Akzent. Nutze den Akzent für weniger als ein Zehntel des Designs.

- Gefahr: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Nachtmarkt: `linear-gradient(135deg, #141824 0%, #3a1448 50%, #ff2bd6 80%, #00f0ff 100%)`
- Terminal: `radial-gradient(circle at 80% 85%, #39ff14 0%, #0f3d16 25%, #050b07 65%)`
- Roter Alarm: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Kaltes Chrom: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

Dieselben fünf Paletten als Hintergründe. Das Neon ist an einen Rand oder eine Ecke gedrückt, sodass der Großteil der Fläche dunkel genug für Worte bleibt.

## Cyberpunk-Farben als CSS-Variablen

Für eine Website, ein Stream-Overlay oder eine Spieloberfläche legst du die Palette als Custom Properties an, damit du das Haupt-Neon an einer Stelle tauschen kannst. Dieses Beispiel nutzt die Palette Nachtmarkt, wobei das Neon für Rahmen, Links und ein Blickpunktelement reserviert bleibt.

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

Fließtext bleibt ein weiches gebrochenes Weiß; die Neons sind Rändern, Links und einer einzelnen leuchtenden Ecke vorbehalten.

Siehe [CSS Custom Properties für Theming](https://gradiently.design/de/guide/css-custom-properties-theming) zum Wechseln von Paletten und [Dark-Mode-Design](https://gradiently.design/de/guide/dark-mode-design) für die allgemeinen Regeln beim Bauen auf dunklen Gründen.

### Fotos in einer Cyberpunk-Palette

Gewöhnliche Fotos lassen sich in die Palette ziehen. Nachtaufnahmen von Straßen, Regen auf Glas, Parkplätze und Treppenhäuser funktionieren alle, sobald sie abgedunkelt und eingefärbt sind. Ein Duotone, das Schatten auf deine Grundfarbe und Lichter auf dein Haupt-Neon legt, macht aus einem faden Handyfoto einer Bushaltestelle etwas, das zum Set gehört. Halte die Einfärbung auf Hintergründen stark und auf Gesichtern sanfter, wo ein volles Neon-Duotone hart wirken kann. [Der Duotone-Effekt](https://gradiently.design/de/guide/duotone-effect) erklärt, wie du die zwei Farben wählst.

## Cyberpunk-Text lesbar halten

Neon auf fast Schwarz fühlt sich an, als müsse es lesbar sein, und bei großen Überschriften ist es das meist auch. Probleme beginnen bei kleinem Text und bei den dunkleren Neons. Gesättigtes Rot und Blau sind für das Auge dunkler, als sie aussehen: reines Blau `#0000ff` auf Schwarz fällt selbst bei großem Text durch, und Warnrot schafft die Hürde bei kleinem Text nur knapp. Gelb, Cyan und Grün sind die am besten lesbaren Neons auf dunklen Gründen. Prüfe Paare anhand der WCAG-Hinweise, erklärt von [WebAIM](https://webaim.org/resources/contrastchecker/), bevor du dich festlegst.

### Schwer lesbar

- Lange Absätze in Magenta oder Rot
- Neon-Text mit verschwommenem Glow drumherum
- Text über dem hellsten Teil des Neons
- Drei oder vier Neons, die in einer Zeile konkurrieren
- Glitch-Effekte auf jedem Wort

### Leicht lesbar

- Fließtext in gebrochenem Weiß, Neon für Überschriften
- Solide, scharfe Buchstaben ohne Hof
- Worte auf dem dunklen Teil des Grundes
- Ein Neon pro Design, ein kleiner Akzent
- Glitch auf einem einzelnen Wort oder gar nicht

Ein Glow um Buchstaben ist das häufigste Cyberpunk-Klischee, und er ist auch das, was Text auf einem Handy zum Fleck macht. Lass den Hintergrund das Licht tragen und halte die Buchstaben scharf. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) behandelt die Zahlen.

## Cyberpunk-Paletten in echten Designs

Der Look passt natürlich zu Gaming-Kanälen, E-Sport-Teams, Streamern, elektronischer Musik, Tech-Launches und allem über die Zukunft der Städte. Er kann auch für eine Bar oder einen Imbiss spät in der Nacht funktionieren, der sich wie eine Filmszene anfühlen will.

Ein Querformat-Vorschaubild, das Staffel 4 live heute Abend in gelber Schrift auf fast schwarzem Cyberpunk-Hintergrund ankündigt

Ein YouTube-Vorschaubild in der Palette Gefahr: gelbe Überschrift, dunkler Grund, Cyan für die Uhrzeit.

Ein Hochformat-Post mit Nudeln bis 3 Uhr nachts in heller Schrift auf dunkelblauem Hintergrund mit magentafarbenem Licht

Ein Post für Essen spät in der Nacht in der Palette Nachtmarkt, Magenta im Hintergrund gehalten.

1. **Zuerst den Grund wählen** Blauschwarz für Tech, Grünschwarz für Code, warmes Schwarz fürs Nachtleben. Nie flaches #000000.
2. **Ein Neon nach Bedeutung wählen** Gelb für Dringlichkeit, Magenta fürs Nachtleben, Cyan für Bildschirme, Grün für Code, Rot für Alarme.
3. **Einen Akzent hinzufügen** Ein zweites Neon in kleinen Mengen: eine Uhrzeit, ein Preis, eine dünne Linie.
4. **Schmutz hinzufügen** Körnung, Scanlines oder eine Betontextur verhindern, dass die dunklen Flächen wie leerer Bildschirm aussehen.

Wenn dein Kanal oder dein Team einen Cyberpunk-Hintergrund braucht, der wirklich deiner ist, kannst du einen Gradiently Mark sichern, damit nur du damit exportieren kannst, und er verlegt seine ruhigste, am besten kontrastierende Region von selbst hinter deine Worte. [Gaming-Kanalkunst](https://gradiently.design/de/guide/gaming-channel-art) und [Branding für E-Sport-Teams](https://gradiently.design/de/guide/esports-team-branding) zeigen den angewandten Look, und [Synthwave-Farben](https://gradiently.design/de/guide/synthwave-colors) behandelt den wärmeren, nostalgischeren Nachbarn.

## FAQ

### Welche Farben werden im Cyberpunk genutzt?

Neon in Säuregelb, Magenta, Cyan, Giftgrün und Warnrot, vor fast schwarzen Gründen wie Blauschwarz oder nassem Betongrau.

### Was sind die Hex-Codes für eine Cyberpunk-Palette?

Ein guter Startsatz ist #07080d für den Grund, #fcee0a Säuregelb, #ff2bd6 Magenta, #00f0ff Cyan und #39ff14 Giftgrün.

### Was ist der Unterschied zwischen Cyberpunk- und Synthwave-Farben?

Synthwave ist warm und nostalgisch, gebaut um einen pinken und orangen Sonnenuntergang auf Indigo. Cyberpunk ist kälter und rauer, mit industriellem Gelb, Grün und Cyan auf fast Schwarz.

### Ist Neon-Text auf Schwarz barrierefrei?

Gelb, Cyan und Grün auf fast Schwarz bestehen Kontrastprüfungen meist leicht. Reines Blau fällt durch und Rot besteht nur knapp, teste also jedes Paar und halte langen Text von Weiß fern.