Hex, RGB e HSL
Inserisci il colore nel formato che hai e gli altri si riempiono. Tutti e tre i campi sono legati fra loro.
Ecco come appare il colore
Testo su bianco · 3,89
Testo su nero · 5,39
- Hex#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Canali
- Rosso224
- Verde82
- Blu31
- Tonalità16°
- Saturazione76%
- Luminosità50%
Serie di luminosità
Stessa tonalità e stessa saturazione, luminosità dal 10 al 90%. Premi su un riquadro per riprenderlo.
Come funziona
Hex è lo stesso di RGB, solo scritto con cifre esadecimali. Ogni coppia di caratteri sta per un canale, da 00 a ff, cioè da 0 a 255.
La forma breve con tre caratteri è un’abbreviazione in cui ogni carattere viene raddoppiato. #f30 significa quindi #ff3300, per cui solo 4.096 dei 16,7 milioni di colori si possono scrivere così.
HSL descrive gli stessi colori con tonalità, saturazione e luminosità invece che con tre sorgenti di luce. La tonalità è un angolo sul cerchio cromatico, dove 0 è rosso, 120 verde e 240 blu.
Con HSL si lavora meglio quando si vogliono varianti dello stesso colore. Tieni ferme tonalità e saturazione e cambia solo la luminosità, e ottieni una serie che sta insieme.
La conversione fra RGB e HSL è esatta nei due sensi, ma l’arrotondamento a gradi e percentuali intere in HSL può spostare un canale di un passo quando si va avanti e indietro.
Come converte lo strumento
Da RGB a HSL ogni canale si divide prima per 255. La luminosità L è la media fra il canale più alto e quello più basso. La saturazione S è la loro differenza divisa per 1 − |2L − 1|. La tonalità H dipende da quale canale è il più alto ed è espressa in gradi. Nell’altro senso si usa lo stesso cerchio in sei settori, e i canali si arrotondano a interi. Le righe hex, RGB e HSL mostrano interi, mentre la serie di luminosità si calcola dai valori non arrotondati.
Esempio
#1e90ff è rosso 30, verde 144 e blu 255, cioè 0,118, 0,565 e 1. Il più alto è 1 e il più basso 0,118, quindi L = (1 + 0,118) / 2 = 0,559, cioè 55,9%. La differenza 0,882 divisa per 1 − |2 × 0,559 − 1| = 0,882 dà S = 1, cioè 100%. Il blu è il più alto, quindi H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 gradi.
Lo strumento scrive il colore come hsl(210, 100%, 56%). Se scrivi quel testo ottieni #1f8fff, non #1e90ff, perché l’arrotondamento a gradi e percentuali interi ha spostato rosso e verde di un passo ciascuno.
La luminosità HSL non è la luminosità percepita
CSS Color 4 fa notare che giallo e blu hanno entrambi una luminosità HSL del 50%, eppure il giallo sembra molto più chiaro. Le cifre di contrasto dello strumento mostrano la stessa cosa: hsl(60, 100%, 50%) dà un rapporto di 1,07 rispetto al bianco e hsl(240, 100%, 50%) dà 8,59. La serie sotto il colore mantiene tonalità e saturazione e cambia solo la luminosità, a passi di 10 punti percentuali. Stanno insieme, ma i passi non sembrano uguali.
Che cosa legge lo strumento
I campi seguono CSS Color 4: hex con tre, quattro, sei oppure otto caratteri, rgb() con numeri o percentuali, dove 100% vale 255, e hsl() con la tonalità in gradi oppure nelle unità deg, rad, grad e turn. I valori si separano con virgole o spazi. Così rgb(50%, 50%, 50%) diventa rgb(128, 128, 128), e hsl(0.5turn, 100%, 50%) ha la tonalità di 180 gradi, cioè #00ffff.
La trasparenza, in hex a quattro o otto caratteri, come quarto valore o dopo una barra, viene scartata: lo strumento lavora con colori opachi e dice quanta ce n’era. I valori fuori intervallo, come rgb(300, 0, 0), vengono rifiutati perché l’errore di battitura si veda, anche se CSS li riporterebbe nell’intervallo.