Convertire un colore tra HEX, RGB e HSL
Pubblicata il · Aggiornata il 3 min di lettura
HEX, RGB e HSL sono tre modi di scrivere lo stesso colore. Li incontrate in un programma di disegno, in un foglio di stile, in uno strumento di mockup o in una guida del marchio, e passate continuamente dall'uno all'altro. Lo strumento mostra tutti e tre insieme e accetta le notazioni più comuni.
Tre notazioni dello stesso colore
Esplorare colori mostra le tre forme per impostazione predefinita, con un'anteprima del colore. HEX è una stringa di sei cifre e lettere preceduta da un cancelletto. RGB dà le quantità di rosso, verde e blu, da 0 a 255. HSL descrive la tonalità in gradi, la saturazione e la luminosità in percentuale, il che è spesso più intuitivo per schiarire o scurire un colore. Per il verde #2F4A3F:
| Forma | Risultato |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
I tre pulsanti HEX, RGB e HSL del pannello riducono il risultato a una sola forma, comoda da copiare così com'è.
Notazioni accettate
| Notazione | Esempio | Risultato in HEX |
|---|---|---|
| HEX breve | #fff | #ffffff |
| HEX con trasparenza | #2F4A3F80 | #2f4a3f80 |
| RGB con virgole | rgb(47, 74, 63) | #2f4a3f |
| RGB con spazi | rgb(47 74 63) | #2f4a3f |
| RGB in percentuale | rgb(100%, 0%, 0%) | #ff0000 |
| HSL con spazi | hsl(156 22% 24%) | #304b40 |
I nomi di colore come «red» e i valori fuori da 0-255 come rgb(300, 0, 0) vengono rifiutati con un messaggio che elenca le notazioni accettate.
Trasparenza
Una trasparenza si scrive in HEX con otto cifre, oppure dopo una barra con spazi. Il colore rgb(47 74 63 / 50%) dà #2f4a3f80 in HEX e rgba(47, 74, 63, 0.5) in RGB. Al contrario, #2F4A3F80 dà un'opacità di 0,502, perché 80 in esadecimale vale 128 su 255.
Perché un'andata e ritorno cambia di un livello
L'HSL è mostrato in numeri interi: tonalità in gradi, saturazione e luminosità in percentuale. Tornare da HSL a HEX porta quindi a un colore vicino, non sempre a quello di partenza.
| Partenza | HSL mostrato | Ritorno a HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Lo scarto è di un livello su ogni canale, invisibile a occhio nudo. Per un token di design o un marchio, conservate l'HEX originale come riferimento e non passate per l'HSL.
Grigi
Un grigio ha saturazione zero e una tonalità senza effetto: #808080 dà rgb(128, 128, 128) e hsl(0, 0%, 50%).
Ciò che lo strumento non misura
Una conversione di formato non dice nulla sulla leggibilità. Lo strumento non calcola il contrasto tra un testo e il suo sfondo: verificatelo a parte prima di pubblicare. Il caso di un codice QR, in cui il contrasto decide se si legge, è trattato in Creare un codice QR che si scansiona al primo colpo.
Per quali usi
Un grafico che passa un colore a uno sviluppatore, una persona che adatta un foglio di stile, un insegnante che prepara una dispensa: lo stesso colore si scrive in tre modi a seconda dello strumento.
Verificare una conversione
- Incollate il colore nel campo: l'anteprima deve corrispondere a ciò che vi aspettate.
- Copiate la forma richiesta dal vostro sistema.
- Per conservare il colore esatto, tenete l'HEX o l'RGB piuttosto che l'HSL.
Domande frequenti
- Come si converte HEX in RGB?
- Incollate il colore nello strumento, che mostra le tre forme insieme, per esempio #2F4A3F, rgb(47, 74, 63) e hsl(156, 22%, 24%).
- Perché un'andata e ritorno tramite HSL cambia il colore di un livello?
- L'HSL è mostrato in numeri interi. Conservate l'HEX originale come riferimento.
- Come si scrive una trasparenza?
- In HEX con otto cifre, oppure in RGB con una barra, per esempio rgb(47 74 63 / 50%).
- Lo strumento verifica la leggibilità del testo?
- No, non calcola il contrasto tra un testo e il suo sfondo: verificatelo a parte.