# Synthwave-färger: hexkoder och gradienter för neonnätter

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

En solnedgång som aldrig tar slut, ett rutnät som löper mot horisonten, kromade bokstäver och en himmel i en blåmärkes färg. Här är paletten bakom det, med koder och gradienter du kan använda i dag.

## The short version

- Synthwave-färger utgår från het rosa, elektrisk cyan, solnedgångsorange och violett mot en djup indigo eller nästan svart himmel.
- Den typiska synthwave-gradienten går från gult via orange och rosa till violett, som en sol som sjunker mot horisonten.
- Synthwave, även kallad retrowave eller outrun, lånar från 1980-talets filmaffischer, arkadspel och bilreklam sedda genom senare nostalgi.
- Nattens botten betyder mest: utan en mörk indigobas tappar neonfärgerna sitt sken och ser platta ut.
- Håll texten i solid ljus färg på den mörkaste delen av designen i stället för att omge den med sken, så att den förblir skarp i små storlekar.

**Synthwave-färger** är het rosa, elektrisk cyan, solnedgångsorange och djup violett, alla mot en indigoblå nattehimmel. Utseendet kommer från en musik- och konstscen som återskapar 1980-talet: en randig sol vid horisonten, ett glödande rutnätsgolv, kromad text och palmsilhuetter. Färgerna är starka, men de fungerar bara för att botten är så mörk. Börja med natten och lägg sedan till neonet.

## Synthwave-färgpaletten med hexkoder

- Midnatt: #0b0221
- Indigohimmel: #241047
- Violett dis: #6a1b9a
- Het rosa: #ff2a6d
- Solnedgångsorange: #ff8a3d
- Solgult: #ffd23f
- Elektrisk cyan: #05d9e8
- Kromvitt: #d1f7ff

Tre mörka toner för himlen, tre varma för solen, ett kallt neon och en kromhöjdpunkt. De flesta synthwave-designer använder högst fem av dessa.

Tänk dig paletten i två halvor. Den varma halvan (gult, orange, rosa) hör till solen och horisonten. Den kalla halvan (cyan och kromvitt) hör till rutnätet, linjerna och texten. Om du håller halvorna på sina platser får utseendet sin struktur och blir inte en röra av neon.

## Synthwave-gradienter du kan kopiera

Solnedgången är synthwavens hjärta. Den går alltid från varmt till kallt, från solens topp till dess botten eller från horisonten upp i himlen. Nedan ser du de gradienter som dyker upp om och om igen, var och en skriven som ett enda CSS-värde.

- Randig sol: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Natt till horisont: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Cyan till rosa: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Kromfyllning för bokstäver: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Horisontsken: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Enkel nattbotten: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

Kromfyllningen har ett hårt brott i mitten, och det är det som får den att se ut som polerad metall som speglar en horisont.

> **Undvik grått där rosa möter cyan** Rosa och cyan ligger långt ifrån varandra på färghjulet, så en rak övertoning mellan dem sjunker ner i en grådaskig lila. Led övertoningen via violett, som i gradienten cyan till rosa ovan, så förblir den levande. [Grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar varför.

## Synthwave-sol och rutnät i CSS

De två klassiska formerna är lätta att bygga med lagrade gradienter. Solen är en cirkel fylld med solnedgångsgradienten och skuren av vågräta ränder. Rutnätet är två upprepade gradienter, en vågrät och en lodrät, lutade bakåt med en perspektivtransform.

```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 natthimmel, en solnedgångssol med ränder genom nedre halvan och ett cyanfärgat rutnät lutat i perspektiv. Placera solen på horisontlinjen mellan himmel och rutnät.

Mer om ränder och rutnät finns i [upprepade CSS-gradienter](https://gradiently.design/sv/guide/css-repeating-gradient). Om du animerar rutnätet så att det rullar mot betraktaren, ta hänsyn till dem som bett sin enhet om mindre rörelse, som beskrivs i [minskad rörelse](https://gradiently.design/sv/guide/reduced-motion).

## Synthwave, vaporwave och cyberpunk jämförda

De här tre blandas ihop eftersom de delar neon. Skillnaderna ligger i botten och stämningen, och de spelar roll när du väljer palett.

| Utseende | Botten | Nyckelfärger | Stämning |
| --- | --- | --- | --- |
| Synthwave | Djup indigonatt | Varma solnedgångstoner, cyanfärgat rutnät, krom | Nattkörning, heroiskt, nostalgiskt |
| Vaporwave | Pastell eller mjukt blågrönt | Lila, mint, laxrosa | Ironiskt, drömskt, köpcentrum |
| Cyberpunk | Nästan svart, blöta gator | Syragult, giftgrönt, magenta | Hårt, urbant, dystopiskt |

Synthwave är den varmaste och mest romantiska av de tre. Läs [vaporwave-färger](https://gradiently.design/sv/guide/vaporwave-colors) och [färgpaletter för cyberpunk](https://gradiently.design/sv/guide/cyberpunk-colors) för de andra.

## Tre synthwave-färgkombinationer för olika stämningar

Hela paletten är mycket. De flesta bra synthwave-verk väljer en smalare kombination och håller fast vid den. Dessa tre täcker de stämningar folk oftast vill ha, och var och en är byggd av koderna ovan.

| Kombination | Färger | Bäst för |
| --- | --- | --- |
| Klassisk solnedgång | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Skivomslag, evenemangsaffischer, allt heroiskt |
| Kallt neon | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Teknik, spel, lugnare innehåll sent på kvällen |
| Violett skymning | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Poddar, spellistor, mjukare varumärkesflöden |

Varje kombination håller sig till en mörk botten och lägger på högst tre färger ovanpå.

Om du bygger ett helt flöde väljer du en kombination för vanliga inlägg och sparar den fulla solnedgången till stora tillfällen som en release eller en lansering. Ett flöde där varje inlägg är en flammande solnedgång slutar snabbt kännas speciellt, och solnedgången tappar sin dragningskraft när du till slut behöver den. Samma tänkande finns i [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds), som tar upp hur du håller en nattbotten rik utan att den blir platt eller randig.

## Använda synthwave-färger i dina designer

Synthwave passar musiksläpp, spelströmmar, klubbkvällar, poddar om film och allt som vill kännas som en nattlig bilfärd. Fällan är läsbarheten: designers omger ofta text med ett neonsken som smetas ut i små storlekar och på mobiler. Sätt i stället orden i solid kromvitt eller solgult på den mörkaste delen av himlen. Färgen runt omkring sköter glöden.

Ett kvadratiskt podcastomslag med titeln Night Drive Radio i ljus text på en mörkt violett och rosa synthwave-bakgrund

Ett kvadratiskt podcastomslag: solid ljus text på den mörka himlen, färgen hålls vid kanterna.

En stående story som tillkännager en ny singel med ljus text högt på en mörk synthwave-himmel och varm färg nära botten

Samma palett i en story, med den varma solnedgången lågt och orden högt i mörkret.

- Håll solen eller det ljusaste varma området borta från rubriken.
- Använd cyan för tunna linjer och små detaljer, inte för stora ytor.
- Lägg till fint korn så att den mörka himlen inte får ränder vid export.
- Välj ett rubriktypsnitt med krom- eller kursivkänsla och använd det överallt.

Marks från Gradiently beter sig som synthwave behöver: den lugnaste, mest kontrastrika delen av bakgrunden flyttar sig bakom dina ord, och Auto-bläck väljer ljus eller mörk text rad för rad, så en rubrik bråkar aldrig med solen. För årtiondet allt detta imiterar, se [80-talsestetiken](https://gradiently.design/sv/guide/80s-aesthetic).

## FAQ

### Vilka färger används i synthwave?

Het rosa, elektrisk cyan, solnedgångsorange, solgult och violett, på en djup indigo eller nästan svart himmel med kromvita höjdpunkter.

### Vad är synthwave-gradienten?

En solnedgång som går från gult via orange och rosa till violett. I CSS: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### Är synthwave samma sak som retrowave eller outrun?

Namnen används nästan synonymt. Outrun syftar ofta på körningen och sportbilssidan av stilen, men paletten är densamma.

### Vad är skillnaden mellan synthwave- och vaporwave-färger?

Synthwave använder mättade neonfärger på en mörk natthimmel. Vaporwave använder mjukare pasteller som lila, mint och laxrosa på ljusa eller blågröna bottnar.