# Colori synthwave: codici hex e sfumature per notti al neon

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

Un tramonto che non finisce mai, una griglia che corre verso l’orizzonte, lettere cromate e un cielo color livido. Ecco la palette che sta dietro, con codici e sfumature che puoi usare oggi.

## The short version

- I colori synthwave ruotano attorno a rosa acceso, ciano elettrico, arancio tramonto e viola su un cielo indaco profondo o quasi nero.
- La sfumatura synthwave tipica va dal giallo al viola passando per arancio e rosa, come un sole che affonda nell’orizzonte.
- Il synthwave, detto anche retrowave o outrun, attinge ai poster dei film, ai videogiochi da sala e alle pubblicità di auto degli anni Ottanta, visti attraverso la nostalgia successiva.
- Il fondo del cielo notturno conta più di tutto: senza una base indaco scura i colori neon perdono il bagliore e appaiono piatti.
- Tieni il testo in inchiostro chiaro pieno sulla parte più scura del design invece di circondarlo di alone luminoso, così resta nitido anche in piccolo.

I **colori synthwave** sono rosa acceso, ciano elettrico, arancio tramonto e viola profondo, tutti su un cielo notturno indaco. L’estetica nasce da una scena musicale e artistica che reimmagina gli anni Ottanta: un sole a strisce all’orizzonte, un pavimento a griglia luminosa, lettere cromate e sagome di palme. I colori sono accesi, ma funzionano solo perché il fondo è così scuro. Parti dalla notte, poi aggiungi il neon.

## La palette di colori synthwave con i codici hex

- Mezzanotte: #0b0221
- Cielo indaco: #241047
- Foschia viola: #6a1b9a
- Rosa acceso: #ff2a6d
- Arancio tramonto: #ff8a3d
- Giallo sole: #ffd23f
- Ciano elettrico: #05d9e8
- Bianco cromo: #d1f7ff

Tre scuri per il cielo, tre caldi per il sole, un neon freddo e un riflesso cromato. La maggior parte dei design synthwave ne usa al massimo cinque.

Pensa alla palette in due metà. La metà calda (giallo, arancio, rosa) appartiene al sole e all’orizzonte. La metà fredda (ciano e bianco cromo) appartiene alla griglia, alle linee e alle lettere. Tenere le metà ciascuna al suo posto dà struttura all’estetica e impedisce che diventi un guazzabuglio di neon.

## Sfumature synthwave da copiare

Il tramonto è il cuore del synthwave. Va sempre dal caldo al freddo, dall’alto al basso del sole, oppure dall’orizzonte verso il cielo. Qui sotto trovi le sfumature che tornano di continuo, ciascuna scritta come un unico valore CSS.

- Sole a strisce: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Dalla notte all’orizzonte: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Da ciano a rosa: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Riempimento cromato per lettere: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Bagliore dell’orizzonte: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Fondo notturno semplice: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

Il riempimento cromato ha una rottura netta a metà, ed è ciò che lo fa sembrare metallo lucido che riflette un orizzonte.

> **Evita il grigio dove il rosa incontra il ciano** Rosa e ciano stanno lontani sul cerchio cromatico, quindi una miscela diretta tra i due scivola in un malva spento. Fai passare la miscela per il viola, come nella sfumatura da ciano a rosa qui sopra, e resta vivida. [Le sfumature sporche](https://gradiently.design/it/guide/muddy-gradients) spiega il perché.

## Sole e griglia synthwave in CSS

Le due forme classiche sono facili da costruire con sfumature a strati. Il sole è un cerchio riempito con la sfumatura del tramonto e tagliato da strisce orizzontali. La griglia è fatta di due sfumature ripetute, una orizzontale e una verticale, inclinate all’indietro con una trasformazione di prospettiva.

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

Un cielo notturno, un sole al tramonto striato nella metà inferiore e una griglia ciano inclinata in prospettiva. Metti il sole sulla linea dell’orizzonte tra cielo e griglia.

Per saperne di più su strisce e griglie, vedi [le sfumature CSS ripetute](https://gradiently.design/it/guide/css-repeating-gradient). Se animi la griglia che scorre verso chi guarda, rispetta le persone che hanno chiesto al loro dispositivo meno movimento, come spiegato in [movimento ridotto](https://gradiently.design/it/guide/reduced-motion).

## Synthwave, vaporwave e cyberpunk a confronto

Questi tre si confondono perché condividono il neon. Le differenze stanno nel fondo e nell’atmosfera, e contano quando scegli una palette.

| Estetica | Fondo | Colori chiave | Atmosfera |
| --- | --- | --- | --- |
| Synthwave | Notte indaco profondo | Caldi del tramonto, griglia ciano, cromo | Guida di notte, eroico, nostalgico |
| Vaporwave | Pastello o verde acqua tenue | Lilla, menta, rosa salmone | Ironico, sognante, centro commerciale |
| Cyberpunk | Quasi nero, strade bagnate | Giallo acido, verde tossico, magenta | Crudo, urbano, distopico |

Il synthwave è il più caldo e romantico dei tre. Leggi [i colori vaporwave](https://gradiently.design/it/guide/vaporwave-colors) e [le palette cyberpunk](https://gradiently.design/it/guide/cyberpunk-colors) per gli altri.

## Tre combinazioni di colori synthwave per atmosfere diverse

La palette completa è tanta roba. La maggior parte dei buoni lavori synthwave sceglie una combinazione più stretta e vi si attiene. Queste tre coprono le atmosfere che si cercano di solito, e ciascuna è costruita con i codici qui sopra.

| Combinazione | Colori | Ideale per |
| --- | --- | --- |
| Tramonto classico | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Copertine di album, poster di eventi, tutto ciò che è eroico |
| Neon freddo | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tecnologia, gaming, contenuti più calmi a tarda notte |
| Crepuscolo viola | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podcast, playlist, feed di brand più morbidi |

Ogni combinazione tiene un solo fondo scuro e non aggiunge più di tre colori sopra.

Se stai costruendo un intero feed, scegli una combinazione per i post regolari e riserva il tramonto completo ai grandi momenti come un’uscita o un lancio. Un feed in cui ogni post è un tramonto infuocato smette presto di essere speciale, e il tramonto perde il suo richiamo quando finalmente ti serve. Lo stesso ragionamento sta in [gli sfondi sfumati scuri](https://gradiently.design/it/guide/dark-gradient-backgrounds), che spiega come mantenere ricco un fondo notturno senza che diventi piatto o a bande.

## Usare i colori synthwave nei tuoi design

Il synthwave sta bene su uscite musicali, stream di gaming, serate in discoteca, podcast sul cinema e su tutto ciò che vuole sembrare una guida notturna. La trappola è la leggibilità: i designer spesso circondano il testo di un alone neon, che sbava in piccolo e sul telefono. Scrivi invece le parole in bianco cromo pieno o giallo sole sulla parte più scura del cielo. Ci pensa il colore intorno a far brillare.

Copertina quadrata di podcast intitolata Night Drive Radio in testo chiaro su uno sfondo synthwave viola scuro e rosa

Una copertina quadrata di podcast: testo chiaro pieno sul cielo scuro, colore tenuto ai bordi.

Storia verticale che annuncia un nuovo singolo con testo chiaro in alto su un cielo synthwave scuro e colore caldo vicino al fondo

La stessa palette in una storia, con il tramonto caldo in basso e le parole in alto nello scuro.

- Tieni il sole o la zona calda più luminosa lontano dal titolo.
- Usa il ciano per linee sottili e piccoli dettagli, non per grandi riempimenti.
- Aggiungi una grana fine perché il cielo scuro non formi bande in esportazione.
- Scegli un carattere display con un’aria cromata o corsiva e usalo ovunque.

I Mark di Gradiently si comportano come richiede il synthwave: la parte più calma e di miglior contrasto dello sfondo si sposta dietro le tue parole, e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga, così un titolo non litiga mai con il sole. Per il decennio che tutto questo imita, vedi [l’estetica anni ’80](https://gradiently.design/it/guide/80s-aesthetic).

## FAQ

### Quali colori si usano nel synthwave?

Rosa acceso, ciano elettrico, arancio tramonto, giallo sole e viola, su un cielo indaco profondo o quasi nero con riflessi bianco cromo.

### Qual è la sfumatura synthwave?

Un tramonto che va dal giallo al viola passando per arancio e rosa. In CSS: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### Il synthwave è lo stesso di retrowave o outrun?

I nomi si usano quasi come sinonimi. Outrun si riferisce spesso al lato di guida e delle auto sportive dell’estetica, ma la palette è la stessa.

### Qual è la differenza tra i colori synthwave e vaporwave?

Il synthwave usa neon saturi su un cielo notturno scuro. Il vaporwave usa pastelli più morbidi come lilla, menta e salmone su fondi chiari o verde acqua.