Gradienti arcobaleno che non sembrano un preset predefinito

Un gradiente arcobaleno attraversa le tinte dello spettro, dal rosso all’arancione, al giallo, al verde, al blu e al viola. La versione che offre la maggior parte degli strumenti sembra un’impostazione predefinita perché salta di luminosità: una striscia gialla accecante, una banda blu scura e bordi netti tra le due. Un arcobaleno che sembra progettato tiene ogni colore a una luminosità simile, usa un po’ meno saturazione e spesso copre solo una parte dello spettro.

Questa guida mostra perché il preset sembra sbagliato, tre modi per correggerlo, codici arcobaleno da copiare e il CSS che crea arcobaleni morbidi nei browser moderni. Se tinta, luminosità e croma sono nuove per te, i codici colore spiegati le presentano prima.

Perché l’arcobaleno predefinito sembra dozzinale

L’arcobaleno classico si costruisce in HSL facendo avanzare la tinta a saturazione e luminosità fisse. La luminosità HSL è una formula, non una misura di quanto i colori appaiano chiari. Per il tuo occhio il giallo puro è molto più chiaro del blu puro, anche se HSL li chiama entrambi 50%. OKLCH misura la luminosità percepita, e i numeri mostrano chiaramente il problema.

Come far sembrare progettato un gradiente arcobaleno

1. 1

   Uniforma la luminosità

   Scegli un’unica luminosità percepita, come il 72% in OKLCH, e tieni lì ogni punto. Questo solo cambiamento elimina la striscia gialla e il buco blu.

2. 2

   Abbassa un po’ la croma

   I colori dello schermo completamente saturi si fanno la guerra. Una croma intorno a 0,12 in OKLCH mantiene vivace ogni tinta e resta dentro ciò che gli schermi normali possono mostrare.

3. 3

   Usa un arco, non tutta la ruota

   Tre o quattro tinte vicine, come dal corallo all’oro o dal verde acqua al viola, si leggono come una scelta ragionata. Lo spettro completo si legge come un’immagine di prova, a meno che non sia proprio quello il punto.

4. 4

   Dagli un fondo

   Un arcobaleno sul bianco sembra un giocattolo per bambini; lo stesso arcobaleno che emerge da un quasi nero sembra luce attraverso un prisma. Decidi quale dei due vuoi.

5. 5

   Aggiungi texture o morbidezza

   Grana, sfocatura o una lenta attenuazione radiale trasformano le bande di colore in luce. Leggi gradienti granulosi per la parte sulla grana.

Codici di gradienti arcobaleno da copiare

I primi tre coprono l’intero spettro a diversi livelli di luminosità. Gli altri sono archi: una parte dell’arcobaleno scelta per un’atmosfera, ed è così che funziona davvero la maggior parte delle identità arcobaleno.

Arcobaleni morbidi in CSS con l’interpolazione delle tinte OKLCH

Il CSS moderno può percorrere la ruota delle tinte al posto tuo. Impostare l’interpolazione su oklch e il metodo delle tinte su longer hue fa sì che il browser prenda la strada lunga tra due colori, così due punti con la stessa tinta producono un arcobaleno completo e uniforme. Funziona nelle versioni attuali di Chrome, Edge, Safari e Firefox; controlla la tabella di compatibilità di MDN per il tuo pubblico.

.rainbow {
  /* Fallback: hand-picked stops at even lightness */
  background: linear-gradient(90deg, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3);
  /* One colour, all the way round the hue wheel, at one lightness */
  background: linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20));
}

.rainbow-arc {
  /* Only the short way from coral to teal, still perceptually even */
  background: linear-gradient(in oklch 90deg, oklch(72% 0.12 20), oklch(72% 0.12 170));
}

Tieni la croma moderata quando lo fai. Con una croma alta alcune tinte, soprattutto blu e viola, escono da ciò che un normale schermo sRGB può mostrare, e il browser deve riportarle dentro, il che fa tornare le bande irregolari. Approfondisci in gradienti CSS più morbidi con OKLCH.

Mettere il testo su un gradiente arcobaleno

Un arcobaleno è lo sfondo più difficile per il testo, perché il contrasto cambia lungo tutta la sua estensione. Un testo scuro che si legge bene sul verde acqua può sparire sul viola. Metti le parole sulla parte più calma, appoggiale su una fascia o una scheda discreta, oppure usa un arcobaleno pastello con testo scuro e controlla i punti più chiari e più scuri dietro ogni riga. Il testo su un gradiente passa in rassegna le opzioni.

Dove stanno bene i gradienti arcobaleno

• Strumenti creativi e prodotti legati al colore, dove lo spettro mostra la gamma
• Brand per bambini e istruzione, di solito nella versione pastello
• Musica, festival e vita notturna, come un prisma su un fondo scuro
• Stili olografici e iridescenti, come un riflesso perlato pallido; leggi gradienti olografici
• Campagne Pride, dove la bandiera arcobaleno ha un significato proprio e le sue sei strisce, quindi usala con intenzione e non come decorazione

Un Mark di Gradiently può contenere fino a otto colori, abbastanza per un arcobaleno completo e uniforme con sopra un materiale e la grana. Puoi costruirne uno controllo dopo controllo nella Forge.