Convertitore di colori — HEX, RGB, HSL
Incolla un colore in una qualsiasi delle tre notazioni e ottieni le altre, alfa compreso, con un’anteprima per vedere cosa stai convertendo.
Colore
Notazioni
Su questo strumento
L’esadecimale è quello che ti passa uno strumento di design, rgb() è quello che vuole un canvas o una libreria di immagini, e hsl() è quello a cui ricorri quando ti serve un colore un po’ più chiaro o una tinta ruotata. Convertire tra loro a mano è un’aritmetica che non piace a nessuno. Incolla una delle tre — con o senza alfa — e compaiono le altre, insieme a un’anteprima, perché un valore da solo si sbaglia facilmente a digitare ed è difficile da verificare a occhio.
Come si usa
- 1Incolla un colore: #3fb984, rgb(63 185 132) o hsl(157, 49%, 49%).
- 2Leggi a destra le altre notazioni e controlla l’anteprima sopra di esse.
- 3Copia la riga che ti serve, oppure la proprietà personalizzata CSS già pronta.
Domande frequenti
›Quali notazioni posso incollare?
Esadecimale a 3, 4, 6 o 8 cifre (#3fb, #3fb9, #3fb984, #3fb984cc), rgb() e rgba(), e hsl() e hsla(). Sono accettate sia la sintassi con virgole sia quella moderna con spazi e una barra prima dell’alfa.
›Perché l’HSL torna con i decimali?
Perché tinta, saturazione e luminosità sono continue mentre l’esadecimale ha 8 bit per canale. Convertire esadecimale in HSL cade di rado su numeri interi, e arrotondarli sposterebbe leggermente il colore al ritorno.
›A cosa serve la quarta coppia esadecimale?
All’alfa. #3fb984cc è lo stesso colore all’80 % di opacità. È supportato ormai ovunque conti, ed è più corto che passare a rgba().
›Sono supportati i colori con nome come «tomato»?
No. Risolvere le 148 parole chiave CSS richiede l’intera tabella per un beneficio molto piccolo: incolla invece il valore esadecimale. Qualsiasi pannello degli strumenti per sviluppatori te lo dà.
›Perché i designer parlano sempre di OKLCH?
Perché la luminosità dell’HSL non corrisponde alla luminosità percepita: due colori con la stessa L possono sembrare molto diversi. OKLCH risolve la cosa, il che lo rende molto migliore per costruire palette. Questa pagina resta sulle tre notazioni che incolli tutti i giorni.