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

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

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

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.

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

Siehe CSS Custom Properties für Theming zum Wechseln von Paletten und 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 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, bevor du dich festlegst.

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

1. 1

   Zuerst den Grund wählen

   Blauschwarz für Tech, Grünschwarz für Code, warmes Schwarz fürs Nachtleben. Nie flaches #000000.

2. 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. 3

   Einen Akzent hinzufügen

   Ein zweites Neon in kleinen Mengen: eine Uhrzeit, ein Preis, eine dünne Linie.

4. 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 und Branding für E-Sport-Teams zeigen den angewandten Look, und Synthwave-Farben behandelt den wärmeren, nostalgischeren Nachbarn.