# Colori vaporwave e palette synthwave, con codici esadecimali

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

Rosa pastello, ciano e lilla per il vaporwave, un sole luminoso su una griglia nera per il synthwave. Ogni palette qui ha codici da copiare, e il giudizio per usarla bene.

## The short version

- I colori vaporwave classici sono rosa acceso #ff71ce, ciano #01cdfe, menta #05ffa1, lilla #b967ff e giallo pallido #fffb96.
- Il vaporwave tende al pastello e alla luce del giorno, mentre il synthwave mette magenta e ciano saturi e un sole dal giallo al viola su una notte quasi nera.
- Il rosa e il ciano neon sono troppo chiari per il testo bianco: un testo scuro sul colore neon, o un testo neon su uno sfondo scuro, si legge molto meglio.
- Lo stile funziona meglio quando scegli un solo motivo, come il sole, la griglia o le scritte cromate, invece di accumulare tutti i cliché insieme.
- Una grana leggera e un neon leggermente attenuato fanno sembrare le palette vaporwave e synthwave progettate e non copiate da un meme.

I **colori vaporwave** sono pastelli morbidi e luminosi: rosa acceso, ciano, menta, lilla e un giallo limone pallido, di solito su cieli chiari o sbiaditi. Il suo cugino più rumoroso, il synthwave, prende gli stessi rosa e ciano, li porta al neon e li mette su una notte quasi nera con un sole a strisce che affonda in una griglia. Qui sotto trovi entrambe le palette con i codici esadecimali, gradienti da copiare, il CSS per la scena del tramonto e come usare l’atmosfera senza scivolare nella parodia.

Un po’ di contesto aiuta a usarli con intenzione. Il vaporwave è nato online all’inizio degli anni 2010 come stile musicale e visivo costruito su una cultura dei consumi ricordata a metà: la prima grafica al computer, la calma dei centri commerciali, le finestre dei vecchi sistemi operativi e le statue classiche. Il synthwave attinge all’estetica dei film e dei videogiochi arcade degli anni Ottanta: guide notturne, insegne al neon e griglie laser. Per la storia più ampia del decennio, vedi [i gradienti retrò](https://gradiently.design/it/guide/retro-gradients).

## La classica palette di colori vaporwave

Un set di cinque colori ricorre continuamente quando si descrive il vaporwave, e se lo merita: ogni colore è chiaro, saturo e un po’ sintetico, come uno schermo visto attraverso la foschia. Usalo come punto di partenza, poi decidi quali uno o due colori guidano.

- Rosa acceso: #ff71ce
- Ciano: #01cdfe
- Menta: #05ffa1
- Lilla: #b967ff
- Limone pallido: #fffb96

La classica palette vaporwave. Rosa e ciano fanno gran parte del lavoro; menta e limone sono accenti.

Rosa e ciano ne sono il cuore: un caldo e un freddo con luminosità simile, per questo stanno insieme senza che uno inghiotta l’altro. Il lilla fa da ponte, così una sfumatura dal rosa al lilla al ciano non passa mai per il grigio. Menta e limone rendono meglio in piccolo, per un prezzo, un adesivo o una sola parola.

## Colori synthwave: la versione notturna

Il synthwave, a volte chiamato retrowave, mantiene le tinte ma cambia la luce. Lo sfondo è quasi nero con un riflesso viola, l’orizzonte brilla di magenta e il sole va dal giallo in alto al rosa e al viola in basso. Dove il vaporwave sembra un pomeriggio nebbioso, il synthwave è mezzanotte su una strada deserta.

- Notte: #0b0221
- Viola profondo: #2d0b59
- Magenta neon: #ff2a6d
- Ciano laser: #05d9e8
- Arancio tramonto: #ff901f
- Giallo sole: #ffd319

Una palette synthwave: due sfondi scuri, due neon e i due colori caldi del sole.

### Vaporwave

- Pastello, nebbioso, diurno
- Sfondi chiari: cielo rosa, lilla, bianco
- Rosa e ciano morbidi, basso contrasto
- Motivi: statue, palme, vecchie finestre del desktop
- Sembra nostalgico, calmo e un po’ ironico

### Synthwave

- Neon, luminoso, notturno
- Sfondo viola quasi nero
- Magenta e ciano saturi, alto contrasto
- Motivi: sole a strisce, griglia laser, scritte cromate
- Sembra cinematografico, veloce e drammatico

## Gradienti vaporwave e synthwave da copiare

I gradienti sono il cuore di questo stile, perché ogni motivo è in realtà una fonte di luce: un sole, un orizzonte, un’insegna luminosa. Ogni sfumatura qui sotto resta su un lato della ruota dei colori o passa per il lilla, quindi nessuna diventa fangosa al centro. Se sul tuo schermo succede, [i gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients) spiega perché e come rimediare.

- Sole synthwave: `linear-gradient(180deg, #ffd319 0%, #ff901f 35%, #ff2975 70%, #8c1eff 100%)`
- Orizzonte notturno: `linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 85%, #ff6a3d 100%)`
- Bagliore all’orizzonte: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #7a04eb 40%, #0b0221 75%)`
- Pastello vapor: `linear-gradient(135deg, #ff71ce 0%, #b967ff 50%, #01cdfe 100%)`
- Fontana del centro commerciale: `linear-gradient(135deg, #01cdfe 0%, #05ffa1 100%)`
- Crepuscolo pastello: `linear-gradient(180deg, #fbc2eb 0%, #a6c1ee 100%)`
- Scritta cromata: `linear-gradient(180deg, #e0f7ff 0%, #6fb7ff 48%, #1b1f5e 50%, #ff71ce 100%)`
- Crepuscolo neon: `linear-gradient(180deg, #120458 0%, #7a04eb 60%, #ff124f 100%)`

Otto gradienti per questo stile. I primi tre sono notti synthwave, i tre successivi giorni vaporwave, e Scritta cromata usa uno stop netto tra 48 e 50% per simulare un orizzonte riflesso.

Sfumature neon come queste creano facilmente banding sui grandi schermi, perché lunghi tratti di viola scuro simile lasciano pochi passaggi di colore. Un po’ di grana nasconde i passaggi e aggiunge la superficie morbida e leggermente degradata per cui lo stile è noto. Vedi [i gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) per il metodo, e [i gradienti neon](https://gradiently.design/it/guide/neon-gradients) per un neon più luminoso e pulito senza la cornice retrò.

## Come disegnare un tramonto synthwave con griglia in CSS

L’intera scena è fatta di tre strati: un gradiente per il cielo, un sole con tagli orizzontali nella metà inferiore e un pavimento a griglia inclinato in prospettiva. I tagli sono una maschera con stop netti, e la griglia è fatta di due gradienti a linea sottile ripetuti alla stessa dimensione. Funziona in qualsiasi browser attuale.

```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: una `.scene` che contiene un `.sun` e un `.floor`. Il pavimento parte dall’orizzonte e copre la parte bassa del sole, ed è questo che lo fa sembrare al tramonto.

Per animarla, sposta la posizione dello sfondo del pavimento verso il basso in un ciclo di esattamente una cella, 60px, così la griglia sembra scorrere verso di te all’infinito. Tienila lenta, e rispetta chi chiede meno movimento con [prefers reduced motion](https://gradiently.design/it/guide/reduced-motion).

## Usare lo stile vaporwave senza fare parodia

Lo stile è così riconoscibile che un accumulo dei suoi cliché si legge come uno scherzo. Per un meme va bene; per un brand, la copertina di un disco o un poster che vuoi sia preso sul serio è un problema. La soluzione è la misura: prendi in prestito il colore e un solo motivo, e lascia che tutto il resto sia moderno.

### Da evitare

- Statua, palma, griglia, sole e cromature tutti nello stesso riquadro
- #ff00ff e #00ffff puri su grandi aree
- Testo bianco su rosa acceso o ciano
- Testo molto spaziato in una lingua che non sai leggere
- Rumore da nastro pesante che nasconde le parole

### Da fare

- Un solo motivo, usato con sicurezza
- Neon leggermente attenuato, come nelle palette qui sopra
- Testo scuro sul neon, o neon su uno sfondo scuro
- Un solo carattere pulito e moderno
- Grana fine per la texture, mai a scapito della lettura

| Testo | Sfondo | Contrasto | Verdetto |
| --- | --- | --- | --- |
| Bianco #ffffff | Rosa acceso #ff71ce | 2,5:1 | Insufficiente per il testo corrente |
| Bianco #ffffff | Ciano #01cdfe | 1,9:1 | Insufficiente |
| Notte #0b0221 | Rosa acceso #ff71ce | 8,1:1 | Supera ampiamente |
| Ciano #01cdfe | Notte #0b0221 | 10,7:1 | Supera ampiamente |
| Limone pallido #fffb96 | Viola profondo #2d0b59 | 15:1 | Eccellente |

Rapporti di contrasto per gli abbinamenti comuni. I colori neon sono chiari, quindi vogliono un testo scuro, non bianco. Altro in [il contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility).

Una copertina quadrata per podcast intitolata Night Drive Sessions su uno sfondo scuro e luminoso

Una copertina per podcast prende in prestito la notte e un colore, non tutto il repertorio.

Una storia verticale che annuncia l’evento Notti neon con orario e generi musicali

Una storia per un evento: una riga decisa, dettagli chiari, l’atmosfera affidata allo sfondo.

## Dove funzionano meglio i colori vaporwave

La palette si adatta a tutto ciò che è notturno, musicale o giocosamente nostalgico: copertine di playlist a 1080×1080, copertine di podcast a 3000×3000, poster per club e concerti, schermate offline di Twitch a 1920×1080 e lanci di prodotto con un tocco retrò. È più difficile da proporre per banche, sanità o qualsiasi cosa debba ispirare una fiducia discreta. Per una diretta, [gli sfondi per lo streaming](https://gradiently.design/it/guide/stream-overlay-background) tratta il layout; per le copertine, vedi [le copertine per podcast](https://gradiently.design/it/guide/podcast-cover-art).

Se vuoi la notte synthwave senza costruirla da zero, cerca nel [Mercato](/market) di Gradiently con parole di colore come «magenta neon» o «viola profondo» e crea design con qualsiasi Mark trovi, gratis. Per il look pastello, molto vicino, di fine anni Novanta e inizio Duemila, leggi [l’estetica Y2K](https://gradiently.design/it/guide/y2k-aesthetic).

## FAQ

### Quali sono i colori principali del vaporwave?

Rosa acceso #ff71ce, ciano #01cdfe, menta #05ffa1, lilla #b967ff e limone pallido #fffb96. Rosa e ciano guidano; gli altri sono accenti.

### Che differenza c’è tra i colori vaporwave e synthwave?

Il vaporwave usa pastelli morbidi su sfondi chiari e nebbiosi. Il synthwave usa magenta e ciano neon saturi con un sole dal giallo al viola su una notte viola quasi nera.

### Quale colore del testo funziona su uno sfondo vaporwave?

Testo scuro su rosa o ciano neon, oppure testo neon e limone pallido su uno sfondo viola scuro. Il bianco sul rosa acceso misura circa 2,5:1, troppo poco per il testo corrente.

### Come creo un sole synthwave in CSS?

Dai a un cerchio un gradiente verticale da #ffd319 attraverso #ff901f e #ff2975 fino a #8c1eff, poi taglia strisce orizzontali nella sua metà inferiore con una maschera fatta di stop di colore netti.

### Vaporwave e retrowave sono la stessa cosa?

Non proprio. Retrowave è un altro nome del synthwave, lo stile notturno al neon ispirato a film e videogiochi degli anni Ottanta. Il vaporwave è lo stile più morbido e pastello nato online all’inizio degli anni 2010.