# Vaporwave-farger og synthwave-paletter, med hex-koder

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

Pastellrosa, cyan og lilla for vaporwave, en glødende sol over et svart rutenett for synthwave. Hver palett her kommer med koder du kan kopiere, og med skjønnet som trengs for å bruke den godt.

## The short version

- De klassiske vaporwave-fargene er knallrosa #ff71ce, cyan #01cdfe, mynte #05ffa1, lilla #b967ff og blekgul #fffb96.
- Vaporwave heller mot pastell og dagslys, mens synthwave setter mettet magenta, cyan og en sol fra gult til lilla mot en nesten svart natt.
- Neonrosa og cyan er for lyse for hvit tekst: mørk tekst på neonfargen, eller neontekst på en mørk grunn, leses mye bedre.
- Uttrykket fungerer best når du velger ett motiv, som solen, rutenettet eller krombokstavene, i stedet for å stable alle klisjeene på én gang.
- Mykt korn og en litt dempet neon får vaporwave- og synthwave-paletter til å føles designet og ikke kopiert fra en meme.

**Vaporwave-farger** er myke, glødende pasteller: knallrosa, cyan, mynte, lilla og en blek sitrongul, som regel satt mot bleke eller utvaskede himler. Den mer høylytte slektningen, synthwave, tar den samme rosa og cyan, skrur dem opp til neon og legger dem på en nesten svart natt med en stripete sol som synker ned i et rutenett. Under finner du begge palettene med hex-koder, gradienter du kan kopiere, CSS for solnedgangsscenen, og hvordan du bruker stemningen uten at den tipper over i parodi.

Litt kontekst hjelper deg å bruke dem med vilje. Vaporwave vokste fram på nettet tidlig på 2010-tallet som en musikk- og bildestil bygget av halvt glemt forbrukerkultur: tidlig datagrafikk, roen i kjøpesentre, vinduer fra gamle operativsystemer og klassiske statuer. Synthwave henter fra uttrykket i filmer og arkadespill fra 1980-tallet: nattlige kjøreturer, neonskilt og laserrutenett. For den større historien om tiårene, se [retrogradienter](https://gradiently.design/nb/guide/retro-gradients).

## Den klassiske vaporwave-paletten

Ett sett med fem farger dukker opp igjen og igjen når folk beskriver vaporwave, og det fortjener plassen: hver farge er lys, mettet og litt syntetisk, som en skjerm sett gjennom dis. Bruk det som utgangspunkt, og bestem så hvilke én eller to farger som leder.

- Knallrosa: #ff71ce
- Cyan: #01cdfe
- Mynte: #05ffa1
- Lilla: #b967ff
- Blek sitron: #fffb96

Den klassiske vaporwave-paletten. Rosa og cyan gjør det meste av jobben, mynte og sitron er aksenter.

Rosa og cyan er hjertet i den: en varm og en kald farge med lik lysstyrke, og derfor står de sammen uten at den ene sluker den andre. Lilla bygger bro mellom dem, så en overgang fra rosa via lilla til cyan aldri går gjennom grått. Mynte og sitron holder du helst små, til en pris, et klistremerke eller ett enkelt ord.

## Synthwave-farger: nattversjonen

Synthwave, noen ganger kalt retrowave, beholder fargetonene, men endrer lyset. Grunnen er nesten svart med et fiolett skjær, horisonten gløder i magenta, og solen går fra gult øverst til rosa og lilla nederst. Der vaporwave føles som en disig ettermiddag, er synthwave midnatt på en tom vei.

- Natt: #0b0221
- Dyp fiolett: #2d0b59
- Neonmagenta: #ff2a6d
- Lasercyan: #05d9e8
- Solnedgangsoransje: #ff901f
- Solgul: #ffd319

En synthwave-palett: to mørke grunner, to neonfarger og de to varme fargene i solen.

### Vaporwave

- Pastell, disig, dagslys
- Bleke grunner: rosa himmel, lilla, hvitt
- Myk rosa og cyan, lav kontrast
- Motiver: statuer, palmer, gamle skrivebordsvinduer
- Føles nostalgisk, rolig og litt ironisk

### Synthwave

- Neon, glødende, natt
- Nesten svart fiolett grunn
- Mettet magenta og cyan, høy kontrast
- Motiver: stripete sol, laserrutenett, kromskrift
- Føles filmatisk, rask og dramatisk

## Vaporwave- og synthwave-gradienter du kan kopiere

Gradienter er der denne stilen lever, fordi hvert motiv egentlig er en lyskilde: en sol, en horisont, et glødende skilt. Hver overgang under holder seg på én side av fargehjulet eller går gjennom lilla, så ingen av dem blir grumsete i midten. Skjer det likevel på skjermen din, forklarer [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) hvorfor og hvordan du fikser det.

- Synthwave-sol: `linear-gradient(180deg, #ffd319 0%, #ff901f 35%, #ff2975 70%, #8c1eff 100%)`
- Natthorisont: `linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 85%, #ff6a3d 100%)`
- Horisontglød: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #7a04eb 40%, #0b0221 75%)`
- Vapor-pastell: `linear-gradient(135deg, #ff71ce 0%, #b967ff 50%, #01cdfe 100%)`
- Fontenen i kjøpesenteret: `linear-gradient(135deg, #01cdfe 0%, #05ffa1 100%)`
- Pastellskumring: `linear-gradient(180deg, #fbc2eb 0%, #a6c1ee 100%)`
- Krombokstaver: `linear-gradient(180deg, #e0f7ff 0%, #6fb7ff 48%, #1b1f5e 50%, #ff71ce 100%)`
- Neonskumring: `linear-gradient(180deg, #120458 0%, #7a04eb 60%, #ff124f 100%)`

Åtte gradienter for stilen. De tre første er synthwave-netter, de tre neste vaporwave-dager, og Krombokstaver bruker et hardt stopp på 48 til 50 % for å etterligne en speilet horisont.

Neonoverganger som disse får lett bånding på store skjermer, fordi lange strekk med lignende mørk fiolett gir få fargetrinn. Litt korn skjuler trinnene og gir den myke, litt slitte overflaten stilen er kjent for. Se [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) for metoden, og [neongradienter](https://gradiently.design/nb/guide/neon-gradients) for lysere, renere neon uten retrorammen.

## Slik tegner du en synthwave-solnedgang med rutenett i CSS

Hele scenen er tre lag: en himmelgradient, en sol med vannrette kutt gjennom den nedre halvdelen, og et rutenettgulv vippet i perspektiv. Kuttene er en maske med harde stopp, og rutenettet er to tynne linjegradienter som gjentas i samme størrelse. Det kjører i alle dagens nettlesere.

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

Markup: en `.scene` som inneholder en `.sun` og et `.floor`. Gulvet starter ved horisonten og dekker bunnen av solen, og det er det som får den til å se ut som om den går ned.

Vil du animere det, flytter du bakgrunnsposisjonen til gulvet nedover i en loop med nøyaktig én rute, 60px, så rutenettet ser ut til å rulle mot deg i det uendelige. Hold det sakte, og respekter dem som ber om mindre bevegelse med [prefers reduced motion](https://gradiently.design/nb/guide/reduced-motion).

## Bruke vaporwave-uttrykket uten parodi

Stilen er så gjenkjennelig at en haug av klisjeene leses som en vits. Det er helt greit for en meme. Det er et problem for en merkevare, et platecover eller en plakat du vil skal tas på alvor. Løsningen er tilbakeholdenhet: lån fargen og ett motiv, og la alt annet være moderne.

### Unngå

- Statue, palme, rutenett, sol og krom i samme bilde
- Ren #ff00ff og #00ffff over store flater
- Hvit tekst på knallrosa eller cyan
- Sperret tekst på et språk du ikke kan lese
- Kraftig kassettstøy som skjuler ordene

### Gjør

- Ett motiv, brukt med selvtillit
- Neon som er litt dempet, som i palettene over
- Mørk tekst på neon, eller neon på en mørk grunn
- Én ren, moderne skrift
- Fint korn for tekstur, aldri på bekostning av lesbarheten

| Tekst | Bakgrunn | Kontrast | Dom |
| --- | --- | --- | --- |
| Hvit #ffffff | Knallrosa #ff71ce | 2,5:1 | Holder ikke til brødtekst |
| Hvit #ffffff | Cyan #01cdfe | 1,9:1 | Holder ikke |
| Natt #0b0221 | Knallrosa #ff71ce | 8,1:1 | Består med god margin |
| Cyan #01cdfe | Natt #0b0221 | 10,7:1 | Består med god margin |
| Blek sitron #fffb96 | Dyp fiolett #2d0b59 | 15:1 | Utmerket |

Kontrastforhold for vanlige kombinasjoner. Neonfarger er lyse, så de vil ha mørk tekst, ikke hvit. Mer i [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility).

Et kvadratisk podkastcover med tittelen Night Drive Sessions på en mørk, glødende bakgrunn

Et podkastcover låner natten og én farge, ikke hele settet.

En stående arrangementsstory som annonserer Neon Nights med tidspunkt og musikkstiler

En arrangementsstory: én dristig linje, tydelige detaljer, og stemningen bæres av bakgrunnen.

## Hvor vaporwave-farger fungerer best

Paletten passer til alt som er nattlig, musikalsk eller lekent nostalgisk: spillelistecovere i 1080×1080, podkastcovere i 3000×3000, klubb- og konsertplakater, offline-skjermer på Twitch i 1920×1080 og produktslipp med et retropreg. Den er vanskeligere å selge inn for bank, helse eller alt som skal føles stille tillitvekkende. For en strøm dekker [strømmebakgrunner](https://gradiently.design/nb/guide/stream-overlay-background) oppsettet, og for covere kan du se [podkastcover](https://gradiently.design/nb/guide/podcast-cover-art).

Vil du ha synthwave-natten uten å bygge den fra bunnen av, kan du søke i [Markedet](/market) i Gradiently med fargeord som «neonmagenta» eller «dyp fiolett» og designe gratis med hvilken som helst Mark du finner. For det nært beslektede pastelluttrykket fra slutten av nittitallet og tidlig 2000-tall kan du lese [Y2K-estetikken](https://gradiently.design/nb/guide/y2k-aesthetic).

## FAQ

### Hva er de viktigste vaporwave-fargene?

Knallrosa #ff71ce, cyan #01cdfe, mynte #05ffa1, lilla #b967ff og blek sitron #fffb96. Rosa og cyan leder, de andre er aksenter.

### Hva er forskjellen på vaporwave- og synthwave-farger?

Vaporwave bruker myke pasteller på bleke, disige grunner. Synthwave bruker mettet neonmagenta og cyan med en sol fra gult til lilla på en nesten svart, fiolett natt.

### Hvilken tekstfarge fungerer på en vaporwave-bakgrunn?

Mørk tekst på neonrosa eller cyan, eller neon og blek sitrongul tekst på en mørk fiolett grunn. Hvitt på knallrosa måler omtrent 2,5:1, som er for lavt for brødtekst.

### Hvordan lager jeg en synthwave-sol i CSS?

Gi en sirkel en loddrett gradient fra #ffd319 via #ff901f og #ff2975 til #8c1eff, og kutt så vannrette striper gjennom den nedre halvdelen med en maske laget av harde fargestopp.

### Er vaporwave det samme som retrowave?

Ikke helt. Retrowave er et annet navn på synthwave, den nattlige neonstilen hentet fra filmer og spill fra 1980-tallet. Vaporwave er den mykere pastellstilen som vokste fram på nettet tidlig på 2010-tallet.