Synthwave-kleuren: hexcodes en kleurverlopen voor neon

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

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.

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.

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

Voor meer over strepen en rasters zie herhalende css-kleurverlopen. 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.

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.

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.

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

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