# Vaporwave-kleuren en synthwave-paletten, met hexcodes

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

Pastelroze, cyaan en lila voor vaporwave, een gloeiende zon op een zwart raster voor synthwave. Elk palet hier komt met codes die je kunt kopiëren, en met het inzicht om het goed te gebruiken.

## The short version

- De klassieke vaporwave kleuren zijn felroze #ff71ce, cyaan #01cdfe, mint #05ffa1, lila #b967ff en lichtgeel #fffb96.
- Vaporwave neigt naar pastel en daglicht, terwijl synthwave verzadigd magenta, cyaan en een zon van geel naar paars tegen een bijna zwarte nacht zet.
- Neonroze en cyaan zijn te licht voor witte tekst: donkere tekst op de neonkleur, of neontekst op een donkere ondergrond, leest veel beter.
- De look werkt het best wanneer je één motief kiest, zoals de zon, het raster of chromen letters, in plaats van elk cliché tegelijk te stapelen.
- Zachte korrel en een iets gedimd neon laten paletten van vaporwave en synthwave ontworpen aanvoelen in plaats van gekopieerd uit een meme.

**Vaporwave kleuren** zijn zachte, gloeiende pastels: felroze, cyaan, mint, lila en een licht citroengeel, meestal op bleke of verwassen luchten. Het luidere neefje, synthwave, neemt hetzelfde roze en cyaan, draait ze op tot neon en zet ze op een bijna zwarte nacht met een gestreepte zon die in een raster zakt. Hieronder staan beide paletten met hexcodes, kleurverlopen die je kunt kopiëren, de CSS voor de zonsondergangscène, en hoe je de sfeer gebruikt zonder dat het in parodie omslaat.

Een beetje context helpt je ze bewust te gebruiken. Vaporwave groeide begin jaren 2010 online als een muziek- en beeldstijl, opgebouwd uit half herinnerde consumentencultuur: vroege computergraphics, de rust van winkelcentra, vensters van oude besturingssystemen en klassieke beelden. Synthwave put uit de look van films en arcadespellen uit de jaren tachtig: nachtelijke ritten, neonreclames en laserrasters. Voor het bredere verhaal per decennium, zie [retro-kleurverlopen](https://gradiently.design/nl/guide/retro-gradients).

## Het klassieke vaporwave kleurenpalet

Eén set van vijf kleuren duikt steeds weer op wanneer mensen vaporwave beschrijven, en die verdient zijn plek: elke kleur is licht, verzadigd en een beetje synthetisch, als een scherm gezien door nevel. Gebruik de set als startpunt en bepaal dan welke een of twee kleuren leiden.

- Felroze: #ff71ce
- Cyaan: #01cdfe
- Mint: #05ffa1
- Lila: #b967ff
- Licht citroengeel: #fffb96

Het klassieke vaporwave-palet. Roze en cyaan doen het meeste werk; mint en citroengeel zijn accenten.

Roze en cyaan vormen het hart: een warme en een koele kleur met vergelijkbare helderheid, en daarom staan ze naast elkaar zonder dat de een de ander opslokt. Lila overbrugt ze, dus een overgang van roze via lila naar cyaan loopt nooit door grijs. Mint en citroengeel kun je het best klein houden, voor een bedrag, een sticker of één enkel woord.

## Synthwave-kleuren: de nachtversie

Synthwave, soms retrowave genoemd, houdt de tinten maar verandert het licht. De ondergrond is bijna zwart met een violette zweem, de horizon gloeit magenta, en de zon loopt van geel bovenaan naar roze en paars onderaan. Waar vaporwave voelt als een nevelige middag, is synthwave middernacht op een lege weg.

- Nacht: #0b0221
- Diep violet: #2d0b59
- Neonmagenta: #ff2a6d
- Lasercyaan: #05d9e8
- Zonsondergangoranje: #ff901f
- Zonnegeel: #ffd319

Een synthwave-palet: twee donkere ondergronden, twee neonkleuren en de twee warme kleuren van de zon.

### Vaporwave

- Pastel, nevelig, daglicht
- Bleke ondergronden: roze lucht, lila, wit
- Zacht roze en cyaan, weinig contrast
- Motieven: beelden, palmen, oude desktopvensters
- Voelt nostalgisch, rustig en een beetje ironisch

### Synthwave

- Neon, gloeiend, nacht
- Bijna zwarte violette ondergrond
- Verzadigd magenta en cyaan, veel contrast
- Motieven: gestreepte zon, laserraster, chromen letters
- Voelt filmisch, snel en dramatisch

## Kleurverlopen voor vaporwave en synthwave om te kopiëren

In kleurverlopen leeft deze stijl, want elk motief is eigenlijk een lichtbron: een zon, een horizon, een gloeiend bord. Elke overgang hieronder blijft aan één kant van het kleurenwiel of loopt via lila, dus geen ervan wordt modderig in het midden. Gebeurt dat op jouw scherm toch, dan legt [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) uit waarom en hoe je het oplost.

- Synthwave-zon: `linear-gradient(180deg, #ffd319 0%, #ff901f 35%, #ff2975 70%, #8c1eff 100%)`
- Nachthorizon: `linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 85%, #ff6a3d 100%)`
- Horizongloed: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #7a04eb 40%, #0b0221 75%)`
- Vaporpastel: `linear-gradient(135deg, #ff71ce 0%, #b967ff 50%, #01cdfe 100%)`
- Fontein in het winkelcentrum: `linear-gradient(135deg, #01cdfe 0%, #05ffa1 100%)`
- Pastelschemering: `linear-gradient(180deg, #fbc2eb 0%, #a6c1ee 100%)`
- Chromen letters: `linear-gradient(180deg, #e0f7ff 0%, #6fb7ff 48%, #1b1f5e 50%, #ff71ce 100%)`
- Neonschemering: `linear-gradient(180deg, #120458 0%, #7a04eb 60%, #ff124f 100%)`

Acht kleurverlopen voor de stijl. De eerste drie zijn synthwave-nachten, de volgende drie vaporwave-dagen, en Chromen letters gebruikt een harde stop op 48 tot 50% om een weerspiegelde horizon na te bootsen.

Neonovergangen zoals deze krijgen makkelijk banding op grote schermen, omdat lange stukken vergelijkbaar donker violet weinig kleurstappen overlaten. Een beetje korrel verbergt de stappen en geeft het zachte, licht versleten oppervlak waar de stijl om bekendstaat. Zie [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) voor de methode, en [neon-kleurverlopen](https://gradiently.design/nl/guide/neon-gradients) voor helderder, zuiverder neon zonder het retrokader.

## Zo teken je een synthwave-zonsondergang en raster in CSS

De hele scène bestaat uit drie lagen: een luchtverloop, een zon met horizontale sneden door de onderste helft, en een rastervloer die in perspectief is gekanteld. De sneden zijn een masker met harde stops, en het raster bestaat uit twee dunne lijnverlopen die op dezelfde grootte worden herhaald. Het werkt in elke actuele browser.

```css
.scene {
  position: relative;
  height: 480px;
  overflow: hidden;
  perspective: 400px;
  background: linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 100%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 240px;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 40%, #ff2975 75%, #8c1eff 100%);
  /* horizontal cuts across the lower half */
  mask: linear-gradient(180deg, #000 55%, transparent 55% 59%, #000 59% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%);
}

.floor {
  position: absolute;
  inset: 55% -50% -40%;
  transform: rotateX(60deg);
  transform-origin: top;
  background:
    linear-gradient(#ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    linear-gradient(90deg, #ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    #0b0221;
}
```

Opmaak: een `.scene` met daarin een `.sun` en een `.floor`. De vloer begint bij de horizon en bedekt de onderkant van de zon, en daardoor lijkt het alsof ze ondergaat.

Om het te animeren verplaats je de achtergrondpositie van de vloer in een loop naar beneden met precies één cel, 60px, zodat het raster eindeloos naar je toe lijkt te rollen. Houd het langzaam, en respecteer mensen die om minder beweging vragen met [prefers reduced motion](https://gradiently.design/nl/guide/reduced-motion).

## De vaporwave-look gebruiken zonder parodie

De stijl is zo herkenbaar dat een stapel van zijn clichés als een grap leest. Dat is prima voor een meme; het is een probleem voor een merk, een platenhoes of een poster die je serieus genomen wilt zien. De oplossing is terughoudendheid: leen de kleur en één motief, en laat al het andere modern zijn.

### Vermijd

- Beeld, palmboom, raster, zon en chroom allemaal in één beeld
- Puur #ff00ff en #00ffff over grote vlakken
- Witte tekst op felroze of cyaan
- Wijd gespatieerde tekst in een taal die je niet kunt lezen
- Zware tape-ruis die de woorden verbergt

### Doe

- Eén motief, met overtuiging gebruikt
- Neon iets gedimd, zoals in de paletten hierboven
- Donkere inkt op neon, of neon op een donkere ondergrond
- Eén strak, modern lettertype
- Fijne korrel voor textuur, nooit ten koste van de leesbaarheid

| Tekst | Achtergrond | Contrast | Oordeel |
| --- | --- | --- | --- |
| Wit #ffffff | Felroze #ff71ce | 2,5:1 | Onvoldoende voor lopende tekst |
| Wit #ffffff | Cyaan #01cdfe | 1,9:1 | Onvoldoende |
| Nacht #0b0221 | Felroze #ff71ce | 8,1:1 | Ruim voldoende |
| Cyaan #01cdfe | Nacht #0b0221 | 10,7:1 | Ruim voldoende |
| Licht citroengeel #fffb96 | Diep violet #2d0b59 | 15:1 | Uitstekend |

Contrastverhoudingen voor gangbare combinaties. Neonkleuren zijn helder, dus ze vragen om donkere tekst, niet om wit. Meer in [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility).

Een vierkante podcastcover met de titel Night Drive Sessions op een donkere, gloeiende achtergrond

Een podcastcover leent de nacht en één kleur, niet de hele set.

Een verticale evenementstory die Neon Nights aankondigt met het tijdstip en de muziekstijlen

Een evenementstory: één krachtige regel, duidelijke details, de sfeer gedragen door de achtergrond.

## Waar vaporwave kleuren het best werken

Het palet past bij alles wat nachtelijk, muzikaal of speels nostalgisch is: playlistcovers op 1080×1080, podcastcovers op 3000×3000, posters voor clubs en optredens, offline schermen voor Twitch op 1920×1080 en productdrops met een retrorandje. Het is lastiger te verkopen voor banken, zorg of alles wat rustig betrouwbaar moet aanvoelen. Voor een stream behandelt [stream-achtergronden](https://gradiently.design/nl/guide/stream-overlay-background) de lay-out; voor covers, zie [podcastcovers](https://gradiently.design/nl/guide/podcast-cover-art).

Wil je de synthwave-nacht zonder hem vanaf nul op te bouwen, zoek dan in de [Markt](/market) van Gradiently met kleurwoorden zoals ‘neonmagenta’ of ‘diep violet’ en ontwerp gratis met elke Mark die je vindt. Voor de nauw verwante pastellook van eind jaren negentig en begin jaren 2000, lees de [Y2K-esthetiek](https://gradiently.design/nl/guide/y2k-aesthetic).

## FAQ

### Wat zijn de belangrijkste vaporwave kleuren?

Felroze #ff71ce, cyaan #01cdfe, mint #05ffa1, lila #b967ff en licht citroengeel #fffb96. Roze en cyaan leiden; de andere zijn accenten.

### Wat is het verschil tussen de kleuren van vaporwave en synthwave?

Vaporwave gebruikt zachte pastels op bleke, nevelige ondergronden. Synthwave gebruikt verzadigd neonmagenta en cyaan met een zon van geel naar paars op een bijna zwarte violette nacht.

### Welke tekstkleur werkt op een vaporwave-achtergrond?

Donkere tekst op neonroze of cyaan, of neon en licht citroengele tekst op een donkerviolette ondergrond. Wit op felroze meet ongeveer 2,5:1, wat te laag is voor lopende tekst.

### Hoe maak ik een synthwave-zon in CSS?

Geef een cirkel een verticaal verloop van #ffd319 via #ff901f en #ff2975 naar #8c1eff, en snijd dan horizontale strepen door de onderste helft met een masker van harde kleurstops.

### Is vaporwave hetzelfde als retrowave?

Niet helemaal. Retrowave is een andere naam voor synthwave, de neon-nachtstijl die uit films en games van de jaren tachtig komt. Vaporwave is de zachtere pastelstijl die begin jaren 2010 online groeide.