# Gradienti arcobaleno che non sembrano un preset predefinito

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

L’arcobaleno predefinito ha una striscia gialla accecante e un buco blu scuro. Sistema la luminosità, scegli il tuo arco e lo spettro diventa uno degli strumenti più gioiosi che hai.

## The short version

- Un gradiente arcobaleno attraversa le tinte dello spettro, e la versione predefinita sembra dozzinale perché i suoi colori hanno luminosità molto diverse.
- In OKLCH il giallo puro ha una luminosità di circa il 97%, mentre il blu puro si ferma vicino al 45%, ed è per questo che un arcobaleno predefinito mostra una striscia chiara e una banda scura.
- I gradienti arcobaleno sembrano progettati quando tieni ogni punto a una luminosità simile, abbassi un po’ la croma e usi solo la parte dello spettro che ti serve.
- Il CSS può sfumare un arcobaleno per te con `linear-gradient(in oklch longer hue, ...)`, che percorre l’intera ruota delle tinte tra due colori.
- Il testo su un arcobaleno ha bisogno di un’area calma o di una fascia dietro, perché il contrasto cambia lungo tutto il gradiente.

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](https://gradiently.design/it/guide/color-codes-explained) 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.

| Colore | Hex | Luminosità HSL | Luminosità OKLCH |
| --- | --- | --- | --- |
| Rosso | `#ff0000` | 50% | 62,8% |
| Giallo | `#ffff00` | 50% | 96,8% |
| Verde | `#00ff00` | 50% | 86,6% |
| Ciano | `#00ffff` | 50% | 90,5% |
| Blu | `#0000ff` | 50% | 45,2% |
| Magenta | `#ff00ff` | 50% | 70,2% |

Per HSL sono ugualmente chiari. La luminosità percepita va dal 45% al 97%, ed è per questo che l’arcobaleno predefinito sembra a strisce.

- Arcobaleno HSL predefinito: `linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)`
- Arcobaleno a luminosità uniforme: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`

Lo stesso giro della ruota delle tinte. Il secondo tiene ogni punto vicino al 72% di luminosità OKLCH, così nessun colore salta fuori o sprofonda.

## Come far sembrare progettato un gradiente arcobaleno

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. **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. **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. **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. **Aggiungi texture o morbidezza** Grana, sfocatura o una lenta attenuazione radiale trasformano le bande di colore in luce. Leggi [gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) 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.

- Spettro equilibrato: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`
- Arcobaleno pastello: `linear-gradient(90deg, #fcbfbe 0%, #efca9f 17%, #cbd8a5 33%, #a3e0ca 50%, #9ddcf1 67%, #bfd0ff 83%, #e6c3ee 100%)`
- Ruota dello spettro: `conic-gradient(from 0deg at 50% 50%, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3, #e68485)`
- Arco dell’alba: `linear-gradient(120deg, #ff6b6b 0%, #ff9f43 50%, #feca57 100%)`
- Arco della laguna: `linear-gradient(120deg, #1dd1a1 0%, #0abde3 50%, #5f27cd 100%)`
- Arco del crepuscolo: `linear-gradient(120deg, #5f27cd 0%, #c44569 50%, #ff9f43 100%)`
- Prisma sul nero: `radial-gradient(120% 90% at 50% 110%, #c68bd3 0%, #87a0f0 20%, #2fb5d8 35%, #43bd99 48%, #9bb054 60%, #d49648 72%, #e68485 82%, #0b0b10 100%)`
- Riflesso perlato: `linear-gradient(135deg, #f5e1ff 0%, #d8f3ff 35%, #e1ffe9 65%, #fff4d6 100%)`

Otto gradienti arcobaleno. L’equilibrato e il pastello tengono ogni punto a un’unica luminosità; gli archi scelgono un angolo della ruota; gli ultimi due usano lo spettro come luce.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) per il tuo pubblico.

```css
.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));
}
```

La prima regola disegna un arcobaleno completo da un solo colore. La seconda disegna un arco, prendendo la strada più breve tra due tinte.

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](https://gradiently.design/it/guide/css-gradient-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](https://gradiently.design/it/guide/text-on-gradient) passa in rassegna le opzioni.

Un post quadrato con le parole Ciao colore che attraversano un gradiente arcobaleno, con alcune lettere più difficili da leggere

Senza aiuto, le parole attraversano ogni tinta e il loro contrasto continua a cambiare.

Lo stesso post quadrato in cui il gradiente si ammorbidisce dietro le parole Ciao colore così il testo si legge chiaramente

Con il campo che si calma dietro le parole, l’arcobaleno resta gioioso e la frase si legge.

## 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](https://gradiently.design/it/guide/holographic-gradients)
- **Campagne Pride**, dove la bandiera arcobaleno ha un significato proprio e le sue sei strisce, quindi usala con intenzione e non come decorazione

> **Scegli prima l’arco** Prima di prendere l’intero spettro, chiediti quali tre o quattro tinte portano l’atmosfera. La maggior parte dei design arcobaleno che sembrano di valore sono in realtà archi.

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.

## FAQ

### Come creo un gradiente arcobaleno in CSS?

Usa `linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20))` per un arcobaleno morbido e uniforme, con prima un gradiente a punti hex come alternativa.

### Perché il mio gradiente arcobaleno ha una striscia gialla brillante?

Il giallo viene percepito molto più chiaro del blu o del rosso a parità di luminosità HSL. Tieni ogni punto a un’unica luminosità percepita, come il 72% in OKLCH, per eliminare la striscia.

### Quali sono i codici hex di un gradiente arcobaleno pastello?

Prova `#fcbfbe`, `#efca9f`, `#cbd8a5`, `#a3e0ca`, `#9ddcf1`, `#bfd0ff` e `#e6c3ee`, che stanno tutti a una luminosità alta e simile.

### Si può mettere del testo su un gradiente arcobaleno?

Sì, ma il contrasto cambia lungo il gradiente. Metti il testo sull’area più calma, su una fascia o una scheda, oppure usa un arcobaleno pastello con testo scuro e controlla ogni punto dietro le parole.