# Synthwave-farver: hexkoder og gradienter til neonnætter

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

En solnedgang, der aldrig bliver færdig, et gitter, der løber mod horisonten, krombogstaver og en himmel i farven af et blåt mærke. Her er paletten bag looket med koder og gradienter, du kan bruge i dag.

## The short version

- Synthwave-farver samler sig om hot pink, elektrisk cyan, solnedgangsorange og violet mod en dyb indigo eller næsten sort himmel.
- Den typiske synthwave-gradient går fra gul over orange og pink til violet, som en sol, der synker ned i horisonten.
- Synthwave, også kaldet retrowave eller outrun, låner fra 1980'ernes filmplakater, arkadespil og bilreklamer set gennem senere nostalgi.
- Natteunderlaget betyder mest: uden en mørk indigo bund mister neonfarverne deres glød og ser flade ud.
- Sæt tekst i ensfarvet lyst blæk på den mørkeste del af designet i stedet for at omgive den med glød, så den forbliver skarp i små størrelser.

**Synthwave-farver** er hot pink, elektrisk cyan, solnedgangsorange og dyb violet, alle sat mod en indigo nattehimmel. Looket kommer fra en musik- og kunstscene, der genopfinder 1980'erne: en stribet sol i horisonten, et glødende gitter som gulv, krombogstaver og silhuetter af palmer. Farverne er stærke, men de virker kun, fordi bunden er så mørk. Start med natten, og tilføj så neonen.

## Synthwave-farvepaletten med hexkoder

- Midnat: #0b0221
- Indigohimmel: #241047
- Violet dis: #6a1b9a
- Hot pink: #ff2a6d
- Solnedgangsorange: #ff8a3d
- Solgul: #ffd23f
- Elektrisk cyan: #05d9e8
- Kromhvid: #d1f7ff

Tre mørke til himlen, tre varme til solen, én kølig neon og et kromhøjlys. De fleste synthwave-designs bruger højst fem af dem.

Tænk på paletten i to halvdele. Den varme halvdel (gul, orange, pink) hører til solen og horisonten. Den kølige halvdel (cyan og kromhvid) hører til gitteret, linjerne og bogstaverne. Når hver halvdel bliver på sin plads, får looket sin struktur og bliver ikke til et rod af neon.

## Synthwave-gradienter, du kan kopiere

Solnedgangen er hjertet i synthwave. Den går altid fra varm til kølig fra toppen af solen til bunden, eller fra horisonten op i himlen. Her er de gradienter, der dukker op igen og igen, hver skrevet som én CSS-værdi.

- Stribet sol: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Nat til horisont: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Cyan til pink: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Kromfyld til bogstaver: `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 nattebund: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

Kromfyldet har et hårdt brud på midten, og det er det, der får det til at ligne poleret metal, der spejler en horisont.

> **Undgå gråt, hvor pink møder cyan** Pink og cyan ligger langt fra hinanden på farvehjulet, så en direkte blanding mellem dem falder ned i en mat lilla. Før blandingen gennem violet, som i gradienten fra cyan til pink ovenfor, så forbliver den klar. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) forklarer hvorfor.

## Synthwave-sol og gitter i CSS

De to klassiske former er nemme at bygge med lagdelte gradienter. Solen er en cirkel fyldt med solnedgangsgradienten og skåret over af vandrette striber. Gitteret er to gentagne gradienter, én vandret og én lodret, vippet bagud med en perspektivtransformation.

```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 striber gennem den nederste halvdel og et cyan gitter vippet i perspektiv. Placer solen på horisontlinjen mellem himmel og gitter.

Mere om striber og gitre finder du i [gentagne CSS-gradienter](https://gradiently.design/da/guide/css-repeating-gradient). Hvis du animerer gitteret, så det ruller mod beskueren, skal du tage hensyn til dem, der har bedt deres enhed om mindre bevægelse, som beskrevet i [reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion).

## Synthwave, vaporwave og cyberpunk sammenlignet

De tre bliver blandet sammen, fordi de deler neon. Forskellene ligger i bunden og stemningen, og de betyder noget, når du vælger en palet.

| Look | Bund | Nøglefarver | Stemning |
| --- | --- | --- | --- |
| Synthwave | Dyb indigo nat | Varme solnedgangsfarver, cyan gitter, krom | Natkørsel, heroisk, nostalgisk |
| Vaporwave | Pastel eller blød petrol | Syren, mint, laksepink | Ironisk, drømmende, indkøbscenter |
| Cyberpunk | Næsten sort, våde gader | Syregul, giftgrøn, magenta | Rå, urban, dystopisk |

Synthwave er den varmeste og mest romantiske af de tre. Læs [vaporwave-farver](https://gradiently.design/da/guide/vaporwave-colors) og [cyberpunk-farvepaletter](https://gradiently.design/da/guide/cyberpunk-colors) for de andre.

## Tre synthwave-farvekombinationer til forskellige stemninger

Hele paletten er meget. Det meste gode synthwave-arbejde vælger en smallere kombination og holder fast i den. Disse tre dækker de stemninger, folk typisk ønsker, og hver er bygget af koderne ovenfor.

| Kombination | Farver | Bedst til |
| --- | --- | --- |
| Klassisk solnedgang | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Albumcovers, eventplakater, alt heroisk |
| Kold neon | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tech, gaming, roligere indhold sent om aftenen |
| Violet skumring | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podcasts, playlister, blødere brandfeeds |

Hver kombination holder sig til én mørk bund og lægger højst tre farver ovenpå.

Bygger du et helt feed, så vælg én kombination til de faste opslag, og gem den fulde solnedgang til de store øjeblikke som en udgivelse eller en lancering. Et feed, hvor hvert opslag er en flammende solnedgang, holder hurtigt op med at føles særligt, og solnedgangen mister sin kraft, når du endelig får brug for den. Samme tankegang findes i [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds), der viser, hvordan du holder en nattebund dyb uden at den bliver flad eller får striber.

## Sådan bruger du synthwave-farver i dine designs

Synthwave passer til musikudgivelser, gamingstreams, klubaftener, podcasts om film og alt, der skal føles som en køretur sent om natten. Fælden er læsbarheden: designere omgiver ofte tekst med neonglød, som tværes ud i små størrelser og på telefoner. Sæt i stedet ordene i ensfarvet kromhvid eller solgul på den mørkeste del af himlen. Farven omkring dem står for gløden.

Et kvadratisk podcastcover med titlen Night Drive Radio i lys tekst på en mørk violet og pink synthwave-baggrund

Et kvadratisk podcastcover: ensfarvet lys tekst på den mørke himmel og farven holdt ude ved kanterne.

En lodret story, der annoncerer en ny single i lys tekst højt på en mørk synthwave-himmel med varme farver nær bunden

Samme palet i en story, med den varme solnedgang holdt lavt og ordene højt oppe i mørket.

- Hold solen eller det lyseste varme område væk fra overskriften.
- Brug cyan til tynde linjer og små detaljer, ikke til store flader.
- Tilføj fin kornstruktur, så den mørke himmel ikke får striber ved eksport.
- Vælg én displayskrift med et krom- eller kursivpræg, og brug den overalt.

Marks fra Gradiently opfører sig, som synthwave kræver: den roligste del af baggrunden med bedst kontrast flytter sig bag dine ord, og Automatisk tekstfarve vælger lys eller mørk tekst linje for linje, så en overskrift aldrig kæmper mod solen. For det årti, det hele efterligner, se [80'er-æstetik](https://gradiently.design/da/guide/80s-aesthetic).

## FAQ

### Hvilke farver bruges i synthwave?

Hot pink, elektrisk cyan, solnedgangsorange, solgul og violet sat på en dyb indigo eller næsten sort himmel med kromhvide højlys.

### Hvad er synthwave-gradienten?

En solnedgang, der går fra gul over orange og pink til violet. I CSS: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

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

Navnene bruges næsten i flæng. Outrun henviser ofte til bilkørslen og sportsvognene i looket, men paletten er den samme.

### Hvad er forskellen på synthwave- og vaporwave-farver?

Synthwave bruger mættede neonfarver på en mørk nattehimmel. Vaporwave bruger blødere pasteller som syren, mint og laks på lyse eller petrolfarvede bunde.