# Synthwave-farger: fargekoder og gradienter for neonnatten

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

En solnedgang som aldri tar slutt, et rutenett mot horisonten, krombokstaver og en himmel med fargen til et blåmerke. Her er paletten bak uttrykket, med fargekoder og gradienter du kan bruke i dag.

## The short version

- Synthwave-farger bygger på knallrosa, elektrisk cyan, solnedgangsoransje og fiolett mot en dyp indigo eller nesten svart himmel.
- Den karakteristiske synthwave-gradienten går fra gult via oransje og rosa til fiolett, som en sol som synker i horisonten.
- Synthwave, også kalt retrowave eller outrun, låner fra 1980-tallets filmplakater, arkadespill og bilannonser, sett gjennom senere nostalgi.
- Nattehimmelen som bakgrunn er viktigst. Uten en mørk indigobase mister neonfargene gløden og ser flate ut.
- Bruk ensfarget, lys tekst på den mørkeste delen av designet fremfor å omgi den med glød. Da holder den seg skarp i små størrelser.

**Synthwave-farger** er knallrosa, elektrisk cyan, solnedgangsoransje og dyp fiolett, alt mot en indigofarget nattehimmel. Uttrykket kommer fra et musikk- og kunstmiljø som gjenskaper 1980-tallet: en stripete sol i horisonten, et glødende rutenett på bakken, krombokstaver og palmesilhuetter. Fargene er sterke, men fungerer bare fordi bakgrunnen er så mørk. Begynn med natten, og legg deretter til neon.

## Synthwave-paletten med heksadesimale fargekoder

- Midnatt: #0b0221
- Indigohimmel: #241047
- Fiolett dis: #6a1b9a
- Knallrosa: #ff2a6d
- Solnedgangsoransje: #ff8a3d
- Solgul: #ffd23f
- Elektrisk cyan: #05d9e8
- Kromhvit: #d1f7ff

Tre mørke farger til himmelen, tre varme til solen, én kjølig neonfarge og et kromhøylys. De fleste synthwave-design bruker maksimalt fem av dem.

Tenk på paletten som to halvdeler. Den varme halvdelen, gul, oransje og rosa, hører til solen og horisonten. Den kjølige halvdelen, cyan og kromhvit, hører til rutenettet, linjene og bokstavene. Når halvdelene holder seg på plass, får uttrykket struktur og blir ikke et virvar av neon.

## Synthwave-gradienter du kan kopiere

Solnedgangen er kjernen i synthwave. Den går alltid fra varmt til kjølig fra toppen til bunnen av solen, eller fra horisonten opp i himmelen. Nedenfor finner du gradientene som går igjen, hver skrevet som én CSS-verdi.

- Stripete sol: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Natt til horisont: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Cyan til rosa: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Kromfyll i bokstaver: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Horisontglød: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Enkel nattbakgrunn: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

Kromfyllet har et brått brudd på midten. Det får det til å ligne polert metall som speiler en horisont.

> **Unngå grått der rosa møter cyan** Rosa og cyan ligger langt fra hverandre på fargehjulet, så en direkte blanding mellom dem går gjennom en matt, grålilla farge. La blandingen gå via fiolett, som i gradienten fra cyan til rosa ovenfor, så holder den seg livlig. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer hvorfor.

## Synthwave-sol og rutenett i CSS

De to klassiske formene er enkle å bygge med gradienter i flere lag. Solen er en sirkel fylt med solnedgangsgradienten og skåret av vannrette striper. Rutenettet er to gjentakende gradienter, én vannrett og én loddrett, vippet bakover med en perspektivtransformasjon.

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

En nattehimmel, en solnedgangssol med striper gjennom den nedre halvdelen og et cyan rutenett i perspektiv. Plasser solen på horisontlinjen mellom himmelen og rutenettet.

Les mer om striper og rutenett i [gjentakende CSS-gradienter](https://gradiently.design/nb/guide/css-repeating-gradient). Hvis du animerer rutenettet mot seeren, må du respektere dem som har bedt enheten om mindre bevegelse, som forklart i [redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion).

## Synthwave, vaporwave og cyberpunk sammenlignet

Disse tre blandes sammen fordi de alle bruker neon. Forskjellene ligger i bakgrunnen og stemningen, og betyr noe når du velger palett.

| Uttrykk | Bakgrunn | Hovedfarger | Stemning |
| --- | --- | --- | --- |
| Synthwave | Dyp indigonatt | Varme solnedgangsfarger, cyan rutenett, krom | Nattkjøring, heroisk, nostalgisk |
| Vaporwave | Pastell eller myk blågrønn | Syrin, mint, lakserosa | Ironisk, drømmende, kjøpesenter |
| Cyberpunk | Nesten svart, våte gater | Syregul, giftgrønn, magenta | Rå, urban, dystopisk |

Synthwave er den varmeste og mest romantiske av de tre. Les [vaporwave-farger](https://gradiently.design/nb/guide/vaporwave-colors) og [cyberpunk-paletter](https://gradiently.design/nb/guide/cyberpunk-colors) om de andre.

## Tre synthwave-fargekombinasjoner for ulike stemninger

Hele paletten er mye på én gang. De fleste gode synthwave-design velger en smalere kombinasjon og holder seg til den. Disse tre dekker stemningene folk vanligvis ønsker, og alle er bygget fra fargekodene ovenfor.

| Kombinasjon | Farger | Best til |
| --- | --- | --- |
| Klassisk solnedgang | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Albumomslag, arrangementsplakater, alt med et heroisk uttrykk |
| Kjølig neon | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Teknologi, gaming, roligere innhold for sene kvelder |
| Fiolett skumring | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podkaster, spillelister, mykere merkevarefeeder |

Hver kombinasjon beholder én mørk bakgrunn og legger til maksimalt tre farger oppå.

Hvis du bygger en hel feed, velger du én kombinasjon til vanlige innlegg og sparer hele solnedgangen til store øyeblikk, som en utgivelse eller lansering. En feed der hvert innlegg er en flammende solnedgang, slutter raskt å føles spesiell. Solnedgangen mister kraften når du endelig trenger den. Den samme tanken finnes i [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds), som tar for seg hvordan du beholder dybden i en nattbakgrunn uten at den blir flat eller får bånd.

## Bruk synthwave-farger i designene dine

Synthwave passer til musikkutgivelser, gaming-strømminger, klubbkvelder, podkaster om film og alt som skal føles som en sen kjøretur. Fallgruven er leselighet: designere omgir ofte teksten med neonglød, som flyter ut i små størrelser og på mobil. Sett heller teksten i ensfarget kromhvit eller solgul på den mørkeste delen av himmelen. Fargen rundt står for gløden.

Et kvadratisk podkastomslag med tittelen Night Drive Radio i lys tekst på en mørk fiolett og rosa synthwave-bakgrunn

Et kvadratisk podkastomslag: ensfarget, lys tekst på den mørke himmelen, med farge langs kantene.

En stående story som annonserer en ny singel med lys tekst høyt på en mørk synthwave-himmel og varm farge nær bunnen

Samme palett i en story, med den varme solnedgangen nederst og teksten høyt oppe i mørket.

- Hold solen eller det sterkeste varme området unna overskriften.
- Bruk cyan til tynne linjer og små detaljer, ikke store flater.
- Legg til fine korn slik at den mørke himmelen ikke får bånd ved eksport.
- Velg én overskriftsskrift med krom- eller kursivpreg, og bruk den overalt.

Marker fra Gradiently fungerer slik synthwave trenger: den roligste delen av bakgrunnen med best kontrast flytter seg bak teksten, og Auto-tekstfarge velger lys eller mørk tekst linje for linje. Da kjemper aldri en overskrift med solen. For tiåret som alt etterligner, se [80-tallsestetikken](https://gradiently.design/nb/guide/80s-aesthetic).

## FAQ

### Hvilke farger brukes i synthwave?

Knallrosa, elektrisk cyan, solnedgangsoransje, solgul og fiolett på en dyp indigo eller nesten svart himmel med kromhvite høylys.

### Hva er synthwave-gradienten?

En solnedgang som går fra gult via oransje og rosa til fiolett. I CSS: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### Er synthwave det samme som retrowave eller outrun?

Navnene brukes nesten om hverandre. Outrun viser ofte til kjøre- og sportsbilsiden av uttrykket, men paletten er den samme.

### Hva er forskjellen mellom synthwave- og vaporwave-farger?

Synthwave bruker mettede neonfarger på en mørk nattehimmel. Vaporwave bruker mykere pasteller som syrin, mint og laks på lyse eller blågrønne bakgrunner.