# Cyberpunk-kleurenpalet: neon op bijna zwart, met hexcodes

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

Regen op beton, borden in drie alfabetten, een automaat die zoemt in een steeg. Cyberpunk-kleur is hard licht in een donkere stad. Hier zijn vijf paletten met codes, en hoe je ze leesbaar houdt.

## The short version

- Een cyberpunk-kleurenpalet zet een of twee harde neonkleuren, zoals zuurgeel, magenta, cyaan of giftig groen, tegen een bijna zwarte ondergrond.
- De ondergrond in cyberpunkontwerp is zelden puur zwart: blauwzwart, groenzwart of natte asfaltgrijs geven de neons iets om in te zitten.
- Cyberpunk verschilt van synthwave doordat het kouder en viezer is, met industriële geel- en groentinten in plaats van zonsondergangsroze en oranje.
- Geel, cyaan en groen op bijna zwart slagen makkelijk voor contrastcontroles, terwijl puur blauw faalt en rood veel dichter bij de grens zit.
- Eén dominante neon en één secundair accent per ontwerp houdt cyberpunkgraphics opvallend in plaats van chaotisch.

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

- Nachtasfalt: #07080d
- Blauwzwart: #141824
- Nat beton: #2b2f3a
- Zuurgeel: #fcee0a
- Waarschuwingsrood: #ff003c
- Magentabord: #ff2bd6
- Cyaan-HUD: #00f0ff
- Giftig groen: #39ff14

Drie donkere tinten om de stad te bouwen, vijf neons om hem te verlichten. Je gebruikt zelden meer dan twee neons in één ontwerp.

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

| Palet | Ondergrond | Hoofdneon | Accent |
| --- | --- | --- | --- |
| Gevaar | `#07080d` | Zuurgeel `#fcee0a` | Cyaan `#00f0ff` |
| Nachtmarkt | `#141824` | Magenta `#ff2bd6` | Cyaan `#00f0ff` |
| Terminal | `#050b07` | Giftig groen `#39ff14` | Bleek mint `#b8ffd0` |
| Rood alarm | `#0d0608` | Waarschuwingsrood `#ff003c` | Zuurgeel `#fcee0a` |
| Koud chroom | `#0b0f17` | Cyaan `#00f0ff` | Staal `#9aa4b5` |

Elk palet is een ondergrond, één hoofdneon en één accent. Gebruik het accent voor minder dan een tiende van het ontwerp.

- Gevaar: `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%)`
- Rood alarm: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Koud chroom: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

Dezelfde vijf paletten als achtergrond. De neon is naar een rand of hoek geduwd, zodat het grootste deel van het oppervlak donker genoeg blijft voor woorden.

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

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

Lopende tekst blijft zacht gebroken wit; de neons zijn gereserveerd voor randen, links en één verlichte hoek.

Zie [CSS custom properties voor theming](https://gradiently.design/nl/guide/css-custom-properties-theming) voor het wisselen van paletten, en [ontwerp voor de donkere modus](https://gradiently.design/nl/guide/dark-mode-design) 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](https://gradiently.design/nl/guide/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](https://webaim.org/resources/contrastchecker/) voordat je je vastlegt.

### Moeilijk te lezen

- Lange alinea’s in magenta of rood
- Neontekst met een vervaagde gloed eromheen
- Tekst over het helderste deel van de neon
- Drie of vier neons die in één regel strijden
- Glitcheffecten op elk woord

### Makkelijk te lezen

- Lopende tekst in gebroken wit, neon voor koppen
- Effen, scherpe letters zonder halo
- Woorden op het donkere deel van de ondergrond
- Eén neon per ontwerp, één klein accent
- Glitch op één woord of helemaal niet

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

Een liggende thumbnail die aankondigt dat Seizoen 4 vanavond live gaat, in gele letters op een bijna zwarte cyberpunkachtergrond

Een YouTube-thumbnail in het palet Gevaar: gele kop, donkere ondergrond, cyaan voor de tijd.

Een staande post met de tekst Noedels tot 3 uur ’s nachts in lichte letters op een donkerblauwe achtergrond met magentalicht

Een late-nachtfoodpost in het palet Nachtmarkt, met magenta op de achtergrond gehouden.

1. **Kies eerst de ondergrond** Blauwzwart voor tech, groenzwart voor code, warm zwart voor nachtleven. Nooit vlak #000000.
2. **Kies één neon op betekenis** Geel voor urgentie, magenta voor nachtleven, cyaan voor schermen, groen voor code, rood voor alarmen.
3. **Voeg één accent toe** Een tweede neon in kleine hoeveelheden: een tijd, een prijs, een dunne lijn.
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](https://gradiently.design/nl/guide/gaming-channel-art) en [branding voor esportteams](https://gradiently.design/nl/guide/esports-team-branding) tonen de look in gebruik, en [synthwave-kleuren](https://gradiently.design/nl/guide/synthwave-colors) behandelt de warmere, nostalgischere buur.

## FAQ

### Welke kleuren worden gebruikt in cyberpunk?

Neon zuurgeel, magenta, cyaan, giftig groen en waarschuwingsrood, tegen bijna zwarte ondergronden zoals blauwzwart of natbetongrijs.

### Wat zijn de hexcodes voor een cyberpunkpalet?

Een goede startset is #07080d voor de ondergrond, #fcee0a zuurgeel, #ff2bd6 magenta, #00f0ff cyaan en #39ff14 giftig groen.

### Wat is het verschil tussen cyberpunk- en synthwavekleuren?

Synthwave is warm en nostalgisch, gebouwd rond een roze en oranje zonsondergang op indigo. Cyberpunk is kouder en viezer, met industriële gele, groene en cyaantinten op bijna zwart.

### Is neontekst op zwart toegankelijk?

Geel, cyaan en groen op bijna zwart slagen meestal makkelijk voor contrastcontroles. Puur blauw faalt en rood haalt het net, dus test elk paar en zet lange tekst in gebroken wit.