Cyberpunk-kleurenpalet: neon op bijna zwart, met hexcodes

Een cyberpunk-kleurenpalet is neon op bijna zwart: zuurgeel, hete magenta, elektrisch cyaan en giftig groen, tegen het blauwzwart van een stad bij nacht. De look komt uit tientallen jaren sciencefiction over hoge technologie en laag leven, dus de kleuren voelen kunstmatig en een beetje gevaarlijk. De regel die het laat werken is terughoudendheid: één dominante neon, één accent en veel donker.

De kernkleuren van cyberpunk

Elke neon heeft een taak. Geel leest als industrieel en dringend, zoals gevarentape. Rood betekent waarschuwing. Magenta is nachtleven en reclame. Cyaan is interfaces, schermen en data. Groen is code en chemicaliën. Kies de neon waarvan de taak bij je boodschap past en het palet gaat het verhaal voor je vertellen.

Vijf cyberpunk-paletten met hexcodes

Cyberpunk-kleuren als CSS-variabelen

Voor een website, streamoverlay of game-interface zet je het palet op als custom properties, zodat je de hoofdneon op één plek kunt wisselen. Dit voorbeeld gebruikt het palet Nachtmarkt, met de neon bewaard voor randen, links en één brandpunt.

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

Zie CSS custom properties voor theming voor het wisselen van paletten, en ontwerp voor de donkere modus voor de algemene regels van bouwen op donkere ondergronden.

Foto’s in een cyberpunkpalet

Gewone foto’s kunnen in het palet worden getrokken. Nachtopnamen van straten, regen op glas, parkeergarages en trappenhuizen werken allemaal zodra ze zijn verdonkerd en getint. Een duotone die schaduwen op je ondergrondkleur en hooglichten op je hoofdneon afbeeldt, maakt van een saaie telefoonfoto van een bushalte iets dat in de set hoort. Houd de tint sterk op achtergronden en milder op gezichten, waar een volledige neonduotone hard kan ogen. Het duotone-effect legt uit hoe je de twee kleuren kiest.

Cyberpunktekst leesbaar houden

Neon op bijna zwart voelt alsof het leesbaar moet zijn, en voor grote koppen is dat meestal zo. Problemen beginnen bij kleine tekst en bij de donkerdere neons. Verzadigd rood en blauw zijn voor het oog donkerder dan ze lijken: puur blauw #0000ff op zwart faalt zelfs voor grote tekst, en waarschuwingsrood haalt de lat voor kleine tekst nog maar net. Geel, cyaan en groen zijn de best leesbare neons op donkere ondergronden. Controleer paren aan de hand van de WCAG-richtlijnen uitgelegd door WebAIM voordat je je vastlegt.

Een gloed rond letters is het meest voorkomende cyberpunkcliché, en het is ook wat tekst op een telefoon in een veeg verandert. Laat de achtergrond het licht dragen en houd de letters scherp. Kleurcontrast en toegankelijkheid behandelt de getallen.

Cyberpunk-paletten in echte ontwerpen

De look past vanzelf bij gamingkanalen, esportteams, streamers, elektronische muziek, techlanceringen en alles over de toekomst van steden. Hij kan ook werken voor een bar of een late-nachtsnackkraam die als een filmscène wil aanvoelen.

1. 1

   Kies eerst de ondergrond

   Blauwzwart voor tech, groenzwart voor code, warm zwart voor nachtleven. Nooit vlak #000000.

2. 2

   Kies één neon op betekenis

   Geel voor urgentie, magenta voor nachtleven, cyaan voor schermen, groen voor code, rood voor alarmen.

3. 3

   Voeg één accent toe

   Een tweede neon in kleine hoeveelheden: een tijd, een prijs, een dunne lijn.

4. 4

   Voeg korrel toe

   Korrel, scanlijnen of een betontextuur voorkomen dat de donkere gebieden op een leeg scherm lijken.

Heeft je kanaal of team een cyberpunkachtergrond nodig die echt van jou is, dan kun je een Gradiently Mark claimen zodat alleen jij ermee kunt exporteren, en hij verplaatst zijn rustigste, best contrasterende gebied zelf achter je woorden. Kanaalart voor gaming en branding voor esportteams tonen de look in gebruik, en synthwave-kleuren behandelt de warmere, nostalgischere buur.