Convertire HEX in HSL Hexadecimal ↔ Hue Saturation Lightness Gratis Online Sicuro
Scriva un valore in HEX e lo legga subito in HSL. Il conto si fa nel suo browser, non si manda nulla da nessuna parte, e da che cosa dipende il risultato è scritto più sotto invece di essere dato per scontato.
Non si carica niente
Da dove vengono queste notazioni
L'esadecimale e l'RGB sono la stessa cosa scritta due volte. Un colore da schermo sono tre numeri — quanta luce rossa, verde e blu emettere — ciascuno da 0 a 255, cioè un byte; l'esadecimale scrive semplicemente quei byte in base sedici, sicché #FF8800 e rgb(255, 136, 0) sono lo stesso ordine allo stesso pixel. L'HSL fu inventato perché nessuno dei due è leggibile da un essere umano: dà la tinta come un angolo su una ruota dei colori, con saturazione e luminosità in percentuale, così che un progettista possa schiarire qualcosa senza ricalcolare tre cifre. Il CMYK appartiene a un mondo del tutto diverso: l'inchiostro, non la luce. È sottrattivo, costruito su quattro lastre di stampa, e non raggiunge tutti i colori di uno schermo, perché lo schermo emette luce mentre la carta la rimanda soltanto.
Dove le incontra
L'esadecimale è ciò che si scrive in un foglio di stile e ciò che uno strumento di progetto vi porge. L'RGB compare ovunque un colore richieda aritmetica: sfumature, trasparenza, codice che calcola un tono. All'HSL si ricorre quando si mette a punto una tavolozza a mano, perché i cambiamenti voluti sono di solito cambiamenti di uno dei suoi tre numeri. Il CMYK è ciò che chiede la tipografia, e convertirvi è l'istante in cui un progetto smette di essere luce e diventa inchiostro.
Domande frequenti
Perché il mio risultato CMYK differisce da quello della tipografia?
Perché non esiste una sola conversione corretta. L'aritmetica di questa pagina è quella semplice, indipendente dal dispositivo, ed è la risposta giusta quando serve un punto di partenza o un equivalente approssimato. Una tipografia converte attraverso un profilo colore che tiene conto dell'inchiostro, della carta e della macchina specifici, e lo stesso colore RGB darà valori CMYK diversi su patinata lucida e su carta non patinata. Per ciò che deve corrispondere, chiedete alla tipografia il loro profilo invece di fidarvi di una formula.
Perché certi colori da schermo non si possono stampare?
Perché i due non raggiungono gli stessi colori. Uno schermo fa colore sommando luce e può dare un ciano o un verde vivo e saturo che l'inchiostro semplicemente non eguaglia; la carta fa colore assorbendo luce, e il più chiaro che possa essere è il bianco della pagina. L'insieme dei colori raggiungibili si chiama gamut, e dove i due non si sovrappongono una conversione deve scegliere il colore disponibile più vicino. Ecco perché un colore acceso sullo schermo appare spesso un po' spento in stampa.
Il risultato è esatto?
Dove le due unità si definiscono l'una per mezzo dell'altra con numeri interi, sì: la pagina lo dice sopra la cifra, e l'unico arrotondamento sta in quante cifre si mostrano. Dove il rapporto non ha decimale finita, la pagina mostra dodici cifre significative e dice che la relazione è approssimata invece di fingere il contrario.
Qualcosa di quel che scrivo lascia il mio dispositivo?
No. Il calcolo avviene nel suo browser; non viene inviato nulla, e non c'è nemmeno un server a cui inviarlo. Caricata una volta, la pagina continua a funzionare con la rete spenta.
Perché si converte HEX in HSL
Un codice esadecimale come #5A4632 è un ottimo modo di conservare un colore e un pessimo modo di ragionarci. Nulla nelle cifre ti dice che il colore è un marrone, quanto è luminoso o che aspetto avrebbe una versione appena più pallida. HSL è stato inventato per risolvere questo. Descrive un colore nel modo in cui le persone tendono a parlarne: quale tinta è, quanto è vivido e quanto è chiaro. Convertire HEX in HSL significa tradurre un colore dalla forma che ti consegna uno strumento di design nella forma con cui puoi ragionare: hsl(30, 29%, 28%) è un marrone-arancio scuro e attenuato, e vedi subito che alzando l'ultimo numero diventerà più pallido.
È questo il vero motivo per cui designer e sviluppatori front-end usano la conversione. Hanno un colore di marca in esadecimale e hanno bisogno di una famiglia di colori affini: uno più chiaro per lo stato al passaggio del mouse, uno più scuro per un pulsante premuto, uno molto pallido per una sfumatura di sfondo, uno desaturato per un controllo disattivato. In esadecimale ognuno di questi è una nuova caccia a tre coppie di cifre. In HSL ognuno è la modifica di un solo numero. Il colore è lo stesso colore, visto attraverso una lente più utile.
Questa pagina converte nel tuo browser e non viene caricato nulla. Qui sotto trovi come si calcolano i tre numeri di HSL a partire dalle cifre esadecimali, che cosa la conversione conserva e dove arrotonda, che cosa significano in pratica tinta, saturazione e luminosità, come i designer usano HSL per costruire palette e stati e le trappole in cui cadono le persone che convertono HEX in HSL per la prima volta.
Che cosa descrive HSL
Tinta: la posizione sul cerchio cromatico
La tinta è un angolo da 0 a 360 gradi intorno a un cerchio cromatico. Il rosso sta a 0, il giallo a 60, il verde a 120, il ciano a 180, il blu a 240 e il magenta a 300; a 360 sei tornato al rosso. Una tinta di 30 sta tra il rosso e il giallo, cioè è arancione. Il numero dice in quale famiglia di colori ti trovi, e nulla su quanto sia luminoso o pallido.
Saturazione: quanto è vivido
La saturazione è una percentuale. Al 100% il colore è puro quanto la tinta consente; allo 0% ha perso tutto il colore ed è un grigio. Una saturazione del 29%, come nel nostro marrone d'esempio, è un colore attenuato, terroso. Abbassare la saturazione è il modo più rapido per rendere più calmo un colore squillante senza cambiarne il carattere.
Luminosità: quanto è pallido o scuro
Anche la luminosità è una percentuale. Allo 0% il colore è nero qualunque siano tinta e saturazione; al 100% è bianco; al 50% è il colore pieno, normale. Il nostro marrone al 28% è sul lato scuro. Alzare il numero dà una versione più pallida dello stesso colore, abbassarlo una più scura, ed è esattamente la modifica che i designer vogliono più spesso.
Perché è più facile dell'esadecimale
In esadecimale, rendere un colore più pallido significa aumentare tutte e tre le coppie di quantità diverse in modo che la tinta non scivoli, il che è quasi impossibile a occhio. In HSL significa cambiare una sola cifra e lasciare in pace le altre due.
Come funziona la conversione
Da tre byte a un angolo e due percentuali
Il convertitore legge prima le cifre esadecimali come i valori di rosso, verde e blu, ciascuno da 0 a 255, e li riporta su una scala tra 0 e 1. Trova il più grande e il più piccolo dei tre. La luminosità è la media dei due. La saturazione dipende da quanto sono distanti, rispetto alla luminosità. La tinta dipende da quale canale è il più grande e da come si confrontano gli altri due. Se tutti e tre sono uguali, il colore è un grigio, la saturazione è zero e la tinta non ha significato; il convertitore mostra allora 0.
L'esempio
Per #5A4632 i byte sono 90, 70 e 50. Il rosso è il più grande con 0,353, il blu il più piccolo con 0,196. La luminosità è metà della loro somma, 0,275, circa 28%. La differenza è 0,157, quindi la saturazione è 0,157 diviso la somma 0,549, circa 29%. Il rosso è il canale più grande e il verde sta in mezzo, il che porta la tinta a 30 gradi. Il risultato è hsl(30, 29%, 28%).
Numeri interi
I tre numeri vengono arrotondati a gradi interi e percentuali intere quando sono scritti. È la forma che le persone usano e quella che CSS si aspetta nel lavoro di tutti i giorni, ma significa che un po' di informazione si perde all'ultima cifra, come spiega la sezione successiva.
Che cosa la conversione conserva e che cosa non può
Conserva il colore come lo ordina l'occhio
Il risultato è il colore come lo ordina l'occhio: una tinta sul cerchio, quanto è saturo, quanto è chiaro. Per questo HSL vale la pena averlo. Puoi rendere un colore più pallido o una tonalità più scura cambiando un numero, cosa quasi impossibile in esadecimale.
Non può promettere gli stessi byte al ritorno
I due descrivono gli stessi colori, ma HSL li raggiunge attraverso una geometria diversa e i suoi tre numeri sono arrotondati a gradi interi e percentuali intere quando vengono scritti. Quindi un colore portato in HSL e di nuovo indietro può finire a uno o due gradini da dove è partito: visivamente lo stesso, non byte per byte lo stesso. Se ti servono esattamente i byte, tieni l'esadecimale. Converti HEX in HSL per lavorare con un colore, e tieni l'esadecimale come originale.
I grigi non hanno tinta
Quando i tre byte sono uguali, sulla tinta non c'è nulla da dire. Il convertitore dà una tinta di 0 e una saturazione dello 0%, e la sola luminosità descrive il grigio. Non leggere nulla in quello 0.
Usare HSL nella pratica
Costruire una famiglia di tonalità
Prendi il colore di base hsl(30, 29%, 28%). Una tonalità più chiara per il passaggio del mouse è hsl(30, 29%, 34%). Una sfumatura molto pallida per lo sfondo è hsl(30, 29%, 94%). Una tonalità più scura per gli stati premuti è hsl(30, 29%, 22%). Tinta e saturazione restano ferme, quindi i colori evidentemente stanno insieme. Fare lo stesso in esadecimale richiederebbe diversi tentativi e continuerebbe ad apparire un po' sbagliato.
Temi e modalità scura
Un tema ha spesso bisogno della stessa palette in una versione chiara e in una scura. Con HSL tieni la tinta e regoli luminosità e saturazione: schiarisci gli sfondi e scurisci il testo per il tema chiaro, e il contrario per quello scuro. Definire la tinta come proprietà personalizzata e variare solo la luminosità è un modo comune e ordinato di farlo.
Generare palette
Per trovare colori che stanno bene con uno di base, ruota la tinta. Trenta gradi per parte danno colori analoghi, 180 dà il complementare, e 120 o 240 danno una triade. Fissa saturazione e luminosità, cambia la tinta, e i colori hanno un'aria uniforme. È un modo rapido di iniziare una palette che non sembri casuale.
Contrasto accessibile
La luminosità è il controllo principale del contrasto. Se il testo è difficile da leggere su uno sfondo colorato, la soluzione di solito è aumentare la differenza di luminosità tra i due, e HSL ne fa una questione di regolare un numero per ciascun lato.
Come convertire HEX in HSL qui
Digita o incolla il codice esadecimale
Inserisci il colore nel primo campo, con o senza il simbolo del cancelletto. Sono accettate le forme a tre e a sei cifre, e viene letta anche quella a otto cifre con trasparenza.
Leggi il valore hsl
La risposta appare subito, come in #5A4632 = hsl(30, 29%, 28%). I tre numeri sono la tinta in gradi e la saturazione e la luminosità in percentuale.
Copialo nel tuo foglio di stile
Usa il risultato così com'è, in una regola come color: hsl(30, 29%, 28%). Per regolare il colore, cambia l'ultima cifra. Lo strumento per la direzione opposta è da HSL a HEX.
Da dove vengono queste notazioni
Esadecimale e RGB sono la stessa cosa scritta due volte
Un colore dello schermo è fatto di tre numeri, quanta luce rossa, verde e blu emettere, ciascuno da 0 a 255, cioè un byte. L'esadecimale scrive semplicemente quei byte in base sedici. Per vedere i numeri, converti HEX in RGB.
HSL e CMYK
HSL è nato perché nessuno dei due è leggibile da una persona: dà la tinta come angolo su un cerchio cromatico, con saturazione e luminosità in percentuale, così un designer può schiarire qualcosa senza ricalcolare tre cifre. Il CMYK appartiene a un mondo del tutto diverso, quello dell'inchiostro anziché della luce. È sottrattivo, costruito da quattro lastre di stampa, e non può raggiungere tutti i colori che uno schermo raggiunge, perché uno schermo emette luce mentre la carta la riflette soltanto.
Trappole quando converti HEX in HSL
Aspettarsi un'andata e ritorno perfetta
Per via dell'arrotondamento, riconvertire può dare un codice a uno o due gradini dall'originale. Per un singolo colore è invisibile. Per un design system in cui molti colori vengono convertiti avanti e indietro, può accumularsi. Tieni l'esadecimale come fonte.
Credere che uguale luminosità significhi uguale brillantezza
Due colori con la stessa luminosità HSL possono apparire molto diversi in brillantezza: un giallo al 50% sembra molto più brillante di un blu al 50%. La luminosità HSL è un numero comodo, non una misura della brillantezza percepita. Per i controlli di contrasto usa uno strumento di contrasto vero e proprio.
Dimenticare i simboli di percentuale
In CSS, saturazione e luminosità in hsl() portano il simbolo di percentuale, e la tinta è un numero semplice o un numero con deg. Omettere i simboli è un errore classico.
Leggere troppo in un grigio
Un grigio non ha tinta. Se il convertitore mostra 0, non significa che sia rossastro.
Domande che le persone fanno prima di convertire
Che cos'è #FF0000 in HSL?
hsl(0, 100%, 50%), rosso puro.
Che cos'è #FFFFFF in HSL?
hsl(0, 0%, 100%), bianco. La tinta non ha senso per il bianco, e il convertitore mostra 0.
HSL è supportato ovunque?
Tutti i browser attuali capiscono hsl() e hsla(). È in CSS da molti anni.
La conversione è esatta?
È esatta nel senso che descrive lo stesso colore, ma i numeri sono arrotondati a gradi e percentuali intere, quindi tornando indietro si può finire a un gradino di distanza.
Il mio colore viene caricato?
No. L'aritmetica gira nel tuo browser e non viene inviato nulla da nessuna parte.
Come torno indietro?
Con da HSL a HEX.
Scegliere con saggezza quando converti HEX in HSL
Usa HSL per lavorare, l'esadecimale per conservare
Tieni la palette originale in esadecimale, dove non è ambigua, e usa HSL quando vuoi creare variazioni. Le andate e ritorno perdono un poco; l'originale no.
Considera gli spazi colore più recenti
CSS ora offre oklch() e notazioni simili in cui una luminosità uguale sembra davvero uguale. Vale la pena impararle per i nuovi design system. HSL resta la notazione che quasi tutti capiscono e che ogni strumento supporta.
Usa le proprietà personalizzate
Definisci --hue, --sat e --light e costruisci i colori a partire da esse: hsl(var(--hue) var(--sat) var(--light)). Un tema allora cambia modificando pochi numeri.
Leggere e scrivere HSL con sicurezza
Alcuni punti di riferimento da ricordare
Pochi numeri rendono HSL più facile da leggere. Le tinte ai multipli di 60 sono i colori puri: 0 rosso, 60 giallo, 120 verde, 180 ciano, 240 blu, 300 magenta. Una luminosità di 50 con saturazione di 100 dà la versione più pura di qualsiasi tinta, e una luminosità di 95 o più è una sfumatura così pallida da funzionare come sfondo. Quando converti HEX in HSL e vedi una tinta vicina a uno di questi riferimenti, puoi nominare la famiglia di colore a colpo d'occhio.
Spostarsi tra le famiglie
Aggiungere 180 a una tinta dà il colore opposto sul cerchio, che è il complementare e di solito il contrasto più forte. Aggiungere o togliere 30 dà un vicino che sta comodamente accanto all'originale. I designer usano questi passi per scegliere accenti che si abbinano a un colore di marca senza andare a tentoni.
Tenere nota dei valori convertiti
Quando converti HEX in HSL per una palette, scrivi i risultati in una tabella con l'esadecimale originale accanto. La tabella mostra come i colori si relazionano, e se una tinta o una luminosità è fuori linea rispetto alle altre, l'anomalia si vede subito. Dà inoltre al tuo gruppo un riferimento condiviso.
Provare su schermi reali
I colori che sembrano bilanciati su un monitor calibrato possono apparire diversi su un telefono al sole o su un portatile economico. Controlla la palette finita su almeno due dispositivi, e regola un po' la luminosità se le sfumature pallide scompaiono su uno dei due.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare indietro, usa da HSL a HEX. Per i numeri dietro il codice, ci sono da HEX a RGB e da RGB a HEX, e per la stampa, da HEX a CMYK e da CMYK a HEX. Per le dimensioni nello stesso foglio di stile, da px a rem e da px a em fanno per le lunghezze ciò che questa pagina fa per i colori.
Un esempio svolto
Diciamo che il tuo colore di marca è #1E7A5C. Converti HEX in HSL e leggi hsl(160, 61%, 30%). Per lo stato al passaggio del mouse scrivi hsl(160, 61%, 36%), un po' più chiaro. Per lo stato premuto, hsl(160, 61%, 24%). Per uno sfondo molto pallido dietro un avviso, hsl(160, 40%, 95%). Per un pulsante disattivato, hsl(160, 12%, 60%), la stessa tinta con la maggior parte del colore tolta. Cinque colori, una tinta, scritti in un minuto, e sembrano tutti stare insieme. Quando il colore di marca cambia, cambi una volta sola il numero della tinta.
Una breve lista di controllo
Prima di convertire
Decidi che cosa vuoi fare con il colore: variarlo, farne un tema o semplicemente leggerlo.
Mentre converti
Incolla l'esadecimale, leggi l'hsl e annota i tre numeri.
Dopo aver convertito
Crea le variazioni cambiando un numero alla volta e guardale sullo sfondo reale.
Errori comuni
Trattare i numeri arrotondati come esatti
Sono numeri interi. Tieni l'esadecimale come originale.
Equiparare luminosità e brillantezza
Due colori con la stessa luminosità possono differire molto in quanto appaiono brillanti.
Omettere i simboli di percentuale
Saturazione e luminosità ne hanno bisogno in CSS.
I tuoi colori restano sul tuo dispositivo
Il calcolo avviene in locale. I tuoi valori sono usati dal tuo browser e non viene inviato nulla da nessuna parte. Non c'è nulla da cancellare dopo e nessun account da creare. È il modo semplice per convertire HEX in HSL.
Riepilogo
Per convertire HEX in HSL qui, digita o incolla il codice esadecimale e leggi subito il valore hsl. La conversione conserva il colore come lo ordina l'occhio: una tinta sul cerchio, quanto è saturo, quanto è chiaro. Per questo HSL vale la pena averlo, perché puoi rendere un colore più pallido o una tonalità più scura cambiando un numero, cosa quasi impossibile in esadecimale. I due descrivono gli stessi colori, ma HSL li raggiunge attraverso una geometria diversa e i suoi tre numeri sono arrotondati a gradi interi e percentuali intere, quindi un colore portato in HSL e di nuovo indietro può finire a uno o due gradini da dove è partito. Se ti servono esattamente i byte, tieni l'esadecimale. Non viene caricato nulla.