Colori synthwave: codici hex e sfumature per notti al neon

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

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 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.

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

Per saperne di più su strisce e griglie, vedi le sfumature CSS ripetute. 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.

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.

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.

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, 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.

• 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.