Gradienti neon: bagliore senza affaticare la vista

Un gradiente neon è una sfumatura di colori molto saturi, come rosa shocking, viola, blu elettrico, ciano o verde acido, di solito luminosi su un fondo scuro come un tubo acceso in una strada buia. È il tipo di gradiente più energico che esista. È anche quello che più facilmente stanca la vista, perché colori saturi affiancati possono tremolare e vibrare. La soluzione non è meno colore ma più buio attorno.

Cosa fa sembrare neon un gradiente

Le vere insegne al neon sono linee sottili di colore intenso circondate da un alone morbido e da una notte scura. Per sembrare neon su uno schermo, un gradiente ha bisogno delle stesse tre cose: colore alla piena saturazione o quasi, un nucleo luminoso che si spegne in un bagliore e un fondo scuro che rende visibile il bagliore. Togli il buio e ottieni un blocco di colore chiassoso invece che luce.

Perché il neon affatica la vista

Quando due colori molto saturi di luminosità simile si incontrano su un bordo netto, come un testo rosso puro su un blu puro, il bordo sembra tremolare. Questo effetto è spesso chiamato vibrazione cromatica, e rende il testo faticoso o persino difficile da mettere a fuoco. Rosso e blu affiancati possono anche sembrare a profondità diverse. I design neon inciampano in entrambi perché ogni colore è alla massima intensità.

Palette di colori neon

Le palette neon funzionano meglio con uno o due colori luminosi più un fondo scuro, non con cinque neon insieme. Rosa e viola, o ciano e blu, sono vicini e brillano insieme senza vibrare. Rosa e ciano è l’abbinamento synthwave classico; sfumato attraverso il viola, resta luminoso invece di diventare grigio.

Come costruire un gradiente neon

1. 1

   Parti dallo scuro

   Riempi l’inquadratura con un quasi nero tinto verso il tuo neon, come un nero violaceo sotto il rosa.

2. 2

   Metti un solo nucleo luminoso

   Metti il neon a piena intensità in un’area piccola, una linea, un anello o un angolo, non al centro dell’inquadratura.

3. 3

   Lascialo spegnere

   Sfuma il nucleo attraverso una versione profonda della stessa tinta fino allo scuro, così si legge come un alone e non come una macchia.

4. 4

   Aggiungi un secondo neon solo se vicino

   Viola accanto al rosa, o blu accanto al ciano, brillano insieme. Gli opposti hanno bisogno di buio in mezzo.

5. 5

   Finisci con la grana

   Gli aloni scuri fanno facilmente banding. Un sottile livello di rumore li mantiene morbidi; vedi il banding nei gradienti.

Il testo sul neon

Componi le parole in bianco o in una tinta chiarissima del tuo neon, mai in un secondo neon. Un morbido alone nel colore neon attorno a lettere bianche si legge come un’insegna; lettere sature su un fondo saturo si leggono come rumore. Tieni il testo corrente lontano dal bagliore più forte e nell’area più scura, e controlla il contrasto come faresti su qualsiasi sfondo scuro; vedi gli sfondi con gradiente scuro.

.neon-title {
  color: #fff0fa; /* pale pink, not neon */
  text-shadow:
    0 0 4px #ff2d95,
    0 0 16px #ff2d95,
    0 0 40px rgb(255 45 149 / 0.6);
}

.neon-panel {
  background: #07020a;
  box-shadow:
    0 0 0 1px rgb(0 224 255 / 0.6),
    0 0 24px rgb(0 224 255 / 0.35);
  border-radius: 16px;
}

Dove si adattano i gradienti neon

La stampa merita una nota a parte. I neon dello schermo sono più luminosi di quanto i normali inchiostri CMYK possano riprodurre, quindi in stampa escono spenti. Gli inchiostri spot fluorescenti possono avvicinarsi; chiedi alla tua tipografia, e leggi prima i gradienti per la stampa. Per una versione più morbida del colore luminoso, vedi i gradienti aurora, e per quella retrò, i colori vaporwave.

Il neon prende vita in movimento. Una pulsazione lenta su un fondo scuro è uno sfondo forte per una storia o un Reel, e in Gradiently i design creati con un Mark riservato si esportano come loop continui da 5 a 30 secondi al ritmo che scegli.