# Synthwave-kleuren: hexcodes en kleurverlopen voor neon

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

Een zonsondergang die nooit eindigt, een raster dat tot de horizon loopt, chromen letters en een lucht in de kleur van een blauwe plek. Dit is het palet erachter, met codes en kleurverlopen die je vandaag kunt gebruiken.

## The short version

- Synthwave-kleuren draaien om felroze, elektrisch cyaan, zonsondergangoranje en violet tegen een diepe indigo of bijna zwarte lucht.
- Het kenmerkende synthwave-kleurverloop loopt van geel via oranje en roze naar violet, als een zon die in de horizon zakt.
- Synthwave, ook retrowave of outrun genoemd, leent van filmposters, arcadespellen en autoreclames uit de jaren tachtig, gezien door latere nostalgie.
- De nachtelijke ondergrond telt het zwaarst: zonder een donkere indigobasis verliezen de neonkleuren hun gloed en zien ze er plat uit.
- Zet tekst in effen lichte inkt op het donkerste deel van het ontwerp in plaats van er gloed omheen te leggen, zodat hij ook op kleine formaten scherp blijft.

**Synthwave-kleuren** zijn felroze, elektrisch cyaan, zonsondergangoranje en diep violet, allemaal tegen een indigo nachtlucht. De look komt uit een muziek- en kunstscene die de jaren tachtig opnieuw verbeeldt: een gestreepte zon op de horizon, een gloeiende rastervloer, chromen letters en silhouetten van palmen. De kleuren zijn fel, maar ze werken alleen doordat de ondergrond zo donker is. Begin met de nacht en voeg dan het neon toe.

## Het synthwave-kleurenpalet met hexcodes

- Middernacht: #0b0221
- Indigolucht: #241047
- Violette waas: #6a1b9a
- Felroze: #ff2a6d
- Zonsondergangoranje: #ff8a3d
- Zonnegeel: #ffd23f
- Elektrisch cyaan: #05d9e8
- Chroomwit: #d1f7ff

Drie donkere tinten voor de lucht, drie warme voor de zon, één koel neon en een chroomaccent. De meeste synthwave-ontwerpen gebruiken er hooguit vijf.

Zie het palet als twee helften. De warme helft (geel, oranje, roze) hoort bij de zon en de horizon. De koele helft (cyaan en chroomwit) hoort bij het raster, de lijnen en de letters. Door de helften op hun plek te houden krijgt de look zijn structuur en wordt het geen warboel van neon.

## Synthwave-kleurverlopen die je kunt kopiëren

De zonsondergang is het hart van synthwave. Hij loopt altijd van warm naar koel, van boven naar onder in de zon, of van de horizon omhoog de lucht in. Hieronder staan de kleurverlopen die steeds terugkomen, elk geschreven als één css-waarde.

- Gestreepte zon: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Nacht tot horizon: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Cyaan naar roze: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Chroomvulling voor letters: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Gloed van de horizon: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Effen nachtondergrond: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

De chroomvulling heeft een harde breuk in het midden, waardoor het lijkt op gepolijst metaal dat een horizon weerspiegelt.

> **Vermijd grijs waar roze en cyaan elkaar ontmoeten** Roze en cyaan liggen ver uit elkaar op het kleurenwiel, dus een rechte overgang ertussen zakt weg in dof mauve. Laat de overgang via violet lopen, zoals in het kleurverloop van cyaan naar roze hierboven, en hij blijft levendig. [Modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) legt uit waarom.

## Synthwave-zon en -raster in css

De twee klassieke vormen zijn makkelijk te bouwen met gelaagde kleurverlopen. De zon is een cirkel gevuld met het zonsondergangverloop en doorsneden door horizontale strepen. Het raster bestaat uit twee herhalende kleurverlopen, één horizontaal en één verticaal, met een perspectieftransformatie achterover gekanteld.

```css
.sky {
  background: linear-gradient(180deg, #0b0221 0%, #241047 55%, #6a1b9a 100%);
}

.sun {
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd23f 0%, #ff8a3d 40%, #ff2a6d 75%, #b3138f 100%);
  /* solid top half, plus stripes: mask layers add together */
  mask-image:
    linear-gradient(180deg, #000 0 55%, transparent 55%),
    repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
}

.grid {
  height: 40vh;
  background-color: #0b0221;
  background-image:
    repeating-linear-gradient(0deg, #05d9e8 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, #05d9e8 0 2px, transparent 2px 48px);
  transform: perspective(300px) rotateX(60deg);
  transform-origin: top;
}
```

Een nachtlucht, een zonsondergangzon waarvan de onderste helft is gestreept en een cyaan raster in perspectief. Zet de zon op de horizonlijn tussen lucht en raster.

Voor meer over strepen en rasters zie [herhalende css-kleurverlopen](https://gradiently.design/nl/guide/css-repeating-gradient). Als je het raster naar de kijker laat scrollen, houd dan rekening met mensen die hun apparaat om minder beweging hebben gevraagd, zoals behandeld in [verminderde beweging](https://gradiently.design/nl/guide/reduced-motion).

## Synthwave, vaporwave en cyberpunk vergeleken

Deze drie worden door elkaar gehaald omdat ze neon delen. De verschillen zitten in de ondergrond en de sfeer, en ze doen ertoe als je een palet kiest.

| Look | Ondergrond | Hoofdkleuren | Sfeer |
| --- | --- | --- | --- |
| Synthwave | Diepe indigonacht | Warme zonsondergangtinten, cyaan raster, chroom | Nachtelijk rijden, heroïsch, nostalgisch |
| Vaporwave | Pastel of zacht petrol | Lila, mint, zalmroze | Ironisch, dromerig, winkelcentrum |
| Cyberpunk | Bijna zwart, natte straten | Zuurgeel, giftig groen, magenta | Rauw, stedelijk, dystopisch |

Synthwave is de warmste en meest romantische van de drie. Lees [vaporwave-kleuren](https://gradiently.design/nl/guide/vaporwave-colors) en [cyberpunk-kleurenpaletten](https://gradiently.design/nl/guide/cyberpunk-colors) voor de andere.

## Drie synthwave-kleurcombinaties voor verschillende sferen

Het volledige palet is veel. De meeste goede synthwave kiest een smallere combinatie en houdt eraan vast. Deze drie dekken de sferen die mensen meestal willen, en elk is opgebouwd uit de codes hierboven.

| Combinatie | Kleuren | Het best voor |
| --- | --- | --- |
| Klassieke zonsondergang | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Albumhoezen, evenementposters, alles wat heroïsch is |
| Koud neon | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tech, gaming, rustigere nachtelijke content |
| Violette schemer | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podcasts, afspeellijsten, zachtere merkfeeds |

Elke combinatie houdt één donkere ondergrond aan en voegt er hooguit drie kleuren aan toe.

Als je een hele feed bouwt, kies dan één combinatie voor gewone posts en bewaar de volledige zonsondergang voor grote momenten, zoals een release of lancering. Een feed waarin elke post een laaiende zonsondergang is, voelt snel niet meer bijzonder, en de zonsondergang verliest zijn kracht als je hem eindelijk nodig hebt. Hetzelfde idee staat in [donkere kleurverloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds), over hoe je een nachtondergrond rijk houdt zonder dat hij plat wordt of banding krijgt.

## Synthwave-kleuren gebruiken in je ontwerpen

Synthwave past bij muziekreleases, gamestreams, clubavonden, podcasts over film en alles wat als een late nachtrit wil voelen. De valkuil is leesbaarheid: ontwerpers leggen vaak een neongloed om tekst, die op kleine formaten en telefoons uitsmeert. Zet woorden in plaats daarvan in effen chroomwit of zonnegeel op het donkerste deel van de lucht. De kleur eromheen doet het gloeien.

Een vierkante podcastcover getiteld Night Drive Radio in lichte letters op een donkerviolette en roze synthwave-achtergrond

Een vierkante podcastcover: effen lichte tekst op de donkere lucht, kleur aan de randen.

Een verticale story die een nieuwe single aankondigt in lichte letters hoog op een donkere synthwave-lucht met warme kleur onderaan

Hetzelfde palet in een story, met de warme zonsondergang laag en de woorden hoog in het donker.

- Houd de zon of het felste warme vlak uit de buurt van de kop.
- Gebruik cyaan voor dunne lijnen en kleine details, niet voor grote vlakken.
- Voeg fijne korrel toe zodat de donkere lucht bij het exporteren geen banding krijgt.
- Kies één displaylettertype met een chroom- of cursieve uitstraling en gebruik het overal.

De Marks van Gradiently gedragen zich zoals synthwave nodig heeft: het rustigste, best contrasterende deel van de achtergrond verschuift achter je woorden en Auto-inkt kiest regel voor regel lichte of donkere tekst, zodat een kop nooit met de zon vecht. Voor het decennium dat dit allemaal nabootst zie [de jaren-tachtig-esthetiek](https://gradiently.design/nl/guide/80s-aesthetic).

## FAQ

### Welke kleuren worden gebruikt in synthwave?

Felroze, elektrisch cyaan, zonsondergangoranje, zonnegeel en violet, op een diepe indigo of bijna zwarte lucht met chroomwitte accenten.

### Wat is het synthwave-kleurverloop?

Een zonsondergang die van geel via oranje en roze naar violet loopt. In css: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### Is synthwave hetzelfde als retrowave of outrun?

De namen worden bijna door elkaar gebruikt. Outrun verwijst vaak naar de kant van de look met rijden en sportwagens, maar het palet is hetzelfde.

### Wat is het verschil tussen synthwave- en vaporwave-kleuren?

Synthwave gebruikt verzadigde neonkleuren op een donkere nachtlucht. Vaporwave gebruikt zachtere pastels zoals lila, mint en zalm op lichte of petrolkleurige ondergronden.