Convertire HSL in HEX Hue Saturation Lightness ↔ Hexadecimal Gratis Online Sicuro
Scriva un valore in HSL e lo legga subito in HEX. 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 HSL in HEX
Hai ricavato un colore in HSL, perché è la notazione in cui puoi ragionare: tinta 30, saturazione 29%, luminosità 28%, un marrone attenuato, e una versione più pallida al 34% per lo stato al passaggio del mouse. Ora il colore deve andare in un posto che vuole un codice esadecimale: un file di token di design, una scheda di marca, uno strumento che non capisce hsl(), un modello di email, un messaggio a un collega. Convertire HSL in HEX significa prendere il colore su cui hai ragionato e scriverlo nella forma breve, non ambigua e compresa da tutto.
La conversione funziona nella direzione opposta a quella che i designer incontrano per prima. Parte da tre numeri a misura d'uomo e arriva a tre byte. Ogni passaggio è semplice aritmetica, ma comporta alcuni casi simili alla trigonometria e degli arrotondamenti, ed è per questo che le persone preferiscono farselo fare. La pagina lo fa nel tuo browser e non viene caricato nulla. Qui sotto trovi come i tre numeri diventano le sei cifre esadecimali, che cosa la conversione conserva, perché un colore passato per HSL può finire a un gradino o due da dove era partito, i modi in cui i designer usano la conversione e le trappole da evitare.
Come funziona la conversione
Da tinta, saturazione e luminosità a rosso, verde e blu
Il convertitore calcola prima la crominanza, cioè quanto il colore è lontano dal grigio: cresce con la saturazione e diminuisce man mano che la luminosità si allontana dal 50%. Colloca poi la tinta in uno dei sei settori del cerchio cromatico, ciascuno largo 60 gradi, e dal settore decide quale dei tre canali è al massimo, quale al minimo e quale sta in mezzo. Infine aggiunge una costante perché la luminosità risulti giusta, riporta i tre valori dall'intervallo da 0 a 1 a quello da 0 a 255 e arrotonda ciascuno a un numero intero. Quei tre byte vengono scritti in base sedici, due cifre ciascuno.
Un esempio con i numeri
Prendi hsl(30, 29%, 28%). La crominanza è (1 − |2 × 0,28 − 1|) × 0,29 = 0,56 × 0,29 = 0,1624. La tinta di 30 gradi è a metà del primo settore, quindi il canale intermedio è metà della crominanza, 0,0812. La costante da aggiungere è 0,28 − 0,0812 = 0,1988. Quindi il rosso è 0,1624 + 0,1988 = 0,3612, il verde è 0,0812 + 0,1988 = 0,28 e il blu è 0,1988. Moltiplicati per 255 e arrotondati, questi sono 92, 71 e 51. In esadecimale è #5C4733.
Grigi
Quando la saturazione è 0%, il colore è un grigio qualunque sia la tinta, e i tre byte sono uguali. hsl(0, 0%, 50%) è #808080. La tinta viene ignorata, quindi qualsiasi numero di tinta dà lo stesso grigio.
Che cosa la conversione conserva e che cosa non può
Conserva il colore come l'hai descritto
Il risultato è il colore di cui hai dato tinta, saturazione e luminosità, scritto in byte. I tre numeri che hai digitato sono il colore come lo ordina l'occhio: una tinta sul cerchio, quanto è saturo, quanto è chiaro. Per questo HSL vale la pena averlo, e la conversione porta fedelmente la tua scelta all'esadecimale.
Non può promettere gli stessi numeri 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. Nel nostro esempio, #5A4632 era un colore il cui HSL è circa hsl(30, 29%, 28%); riconvertendo quelle cifre arrotondate si ottiene #5C4733, a due gradini di distanza nel rosso. Se ti servono i byte esatti, tieni l'esadecimale.
Simboli di percentuale e di grado
La pagina legge la tinta in gradi e la saturazione e la luminosità in percentuale. Puoi scriverle con o senza i simboli. Una tinta sopra 360 o sotto 0 viene riavvolta intorno al cerchio, quindi 390 è uguale a 30.
Usi pratici
Scrivere un file di token di design
Un design system memorizza i colori come token. Molti gruppi creano i colori in HSL, perché possono ragionarci, e li pubblicano in esadecimale, perché ogni strumento lo legge. Converti HSL in HEX una volta per ogni token, e il file pubblicato è qualcosa che tutti possono usare.
Produrre colori per strumenti che non leggono hsl()
I client di posta, alcuni editor di documenti, i programmi di grafica più vecchi e molte librerie di grafici accettano solo l'esadecimale. Qualunque cosa tu abbia ricavato in HSL va convertita prima che possano usarla.
Controllare una palette generata
Uno script che genera una palette ruotando la tinta dà un elenco di valori hsl(). Per vederli come i codici che metteresti in un foglio di stile o daresti a un designer, converti ciascuno in esadecimale. Ti permette anche di individuare valori che si arrotondano allo stesso codice e quindi non sono davvero diversi.
Condividere un colore in un messaggio
Un codice esadecimale è breve, copiabile e compreso da quasi chiunque lavori con il colore. Un valore hsl() è più lungo e meno familiare fuori dal design. Quando mandi un colore a qualcuno, l'esadecimale è la forma cortese.
Come convertire HSL in HEX qui
Digita o incolla il valore hsl
Inserisci il colore nel primo campo nella forma hsl(30, 29%, 28%), oppure solo i tre numeri. La tinta è in gradi, saturazione e luminosità in percentuale.
Leggi il codice esadecimale
La risposta appare subito, come in hsl(30, 29%, 28%) = #5C4733. È scritta con lettere maiuscole e il simbolo del cancelletto.
Copialo nel tuo lavoro
Usa il codice nel tuo foglio di stile, nel file di token o nel messaggio. Per la direzione opposta, da HEX a HSL è a un clic di distanza.
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 HSL in HEX
Aspettarsi di riavere il codice originale
Se sei partito da un codice esadecimale, l'hai convertito in HSL, non hai modificato nulla e hai riconvertito, potresti ottenere un codice diverso a uno o due gradini. Per un singolo colore è invisibile. Per un design system, decidi quale forma è l'originale e tratta l'altra come derivata.
Scambiare saturazione e luminosità
I due si scambiano facilmente per errore: hsl(30, 28%, 29%) non è hsl(30, 29%, 28%). L'ordine è tinta, saturazione, luminosità. Se il colore sullo schermo non sembra quello che ti aspettavi, controlla di non averli invertiti.
Dimenticare che la luminosità non è brillantezza
Due colori con la stessa luminosità possono apparire diversi in brillantezza. Il giallo al 50% di luminosità sembra molto più brillante del blu al 50%. Se scegli colori per testo e sfondo, controlla il loro contrasto con uno strumento vero e proprio, non confrontando i numeri della luminosità.
Usare valori fuori intervallo
Saturazione e luminosità sono limitate da 0 a 100 per cento. I valori fuori da quell'intervallo vengono tagliati. Una luminosità del 120% non è più brillante del bianco; è bianco.
Domande che le persone fanno prima di convertire
Che cos'è hsl(0, 100%, 50%) in esadecimale?
#FF0000, rosso puro.
Che cos'è hsl(0, 0%, 100%) in esadecimale?
#FFFFFF, bianco.
Posso usare i decimali?
Sì. hsl(30.5, 28.6%, 27.8%) è accettato. Il risultato viene arrotondato a byte interi.
La conversione è esatta?
Dà i byte esatti per i numeri che hai digitato, arrotondati a valori interi. Tornando indietro si può finire a un gradino di distanza, perché i numeri HSL erano stati arrotondati.
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 HEX a HSL.
Scegliere con saggezza quando converti HSL in HEX
Decidi quale forma è l'originale
Se progetti in HSL, tieni i valori HSL come fonte e pubblica l'esadecimale come output. Se la marca ti dà l'esadecimale, tieni quello e usa HSL solo per le variazioni. Mescolare i due come fonti alla pari è ciò che crea la deriva.
Usa HSL per variare, l'esadecimale per fissare
Quando ti serve una famiglia di tonalità, lavora in HSL. Quando devi fissare un colore in modo che sia identico in ogni strumento, scrivilo in esadecimale.
Conserva i numeri che hai digitato
Annota i valori HSL accanto all'esadecimale nella nota della tua palette. Se più tardi qualcuno vuole una versione più pallida, può partire dai tuoi numeri e non da un codice già arrotondato.
I sei settori del cerchio
Quale canale è alto, quale basso
La conversione divide il cerchio in sei settori da 60 gradi, e in ciascuno di essi un canale è al massimo, uno al minimo e il terzo cambia dolcemente. Da 0 a 60, il rosso è al massimo, il blu al minimo e il verde sale: il rosso diventa giallo. Da 60 a 120, il verde è al massimo e il rosso scende: il giallo diventa verde. Da 120 a 180, il verde resta alto e il blu sale: il verde diventa ciano. Da 180 a 240, il blu subentra e il verde scende. Da 240 a 300, il blu resta alto e il rosso sale: il blu diventa magenta. Da 300 a 360, il rosso subentra di nuovo e il blu scende. Quando converti HSL in HEX, aiuta sapere in quale settore si trova la tua tinta, perché ti dice quale delle tre coppie nella risposta sarà la più grande.
Perché la risposta ha un'aria di famiglia
Colori con la stessa tinta e saturazione ma luminosità diversa danno codici esadecimali che sembrano parenti: lo stesso schema di quale coppia è alta e quale bassa, solo scalato in su o in giù. #5C4733, #7A5F44 e #A38461 sono tutti nella stessa famiglia, con il rosso più grande, poi il verde, poi il blu. Puoi imparare a leggerlo a colpo d'occhio, e rende gli errori più facili da cogliere.
Costruire una scala di luminosità
Una tinta, nove gradini
Un uso molto pratico della conversione è costruire una scala di un solo colore da molto pallido a molto scuro, il tipo di scala che i design system etichettano 50, 100, 200 e così via fino a 900. Scegli una tinta e una saturazione, e fai passare la luminosità per valori come 96, 90, 80, 70, 60, 50, 40, 30 e 20 per cento. Converti HSL in HEX per ogni gradino, e hai nove codici che stanno insieme. Ridurre leggermente la saturazione agli estremi, di qualche punto nei gradini più pallidi e più scuri, spesso appare più naturale che mantenerla costante.
Dare un nome ai gradini
Dai a ogni gradino un nome che registri il suo ruolo, non il suo valore: superficie per il più pallido, bordo per il successivo, testo per il più scuro. Nel codice, un nome dice al lettore successivo a che cosa serve il colore, e puoi cambiare il numero dietro di esso senza toccare le regole che lo usano.
Temi chiari e scuri
Specchiare la scala
Un tema scuro è spesso il tema chiaro con la scala rovesciata: il gradino più pallido diventa lo sfondo della pagina nel tema chiaro e il più scuro diventa lo sfondo in quello scuro. Se hai costruito la scala in HSL, il tema scuro non ti costa nulla se non una seconda serie di conversioni. Tieni ferma la tinta, il che preserva il carattere della marca, e regola leggermente la saturazione, poiché i colori saturi tendono ad apparire aspri sugli sfondi scuri.
Controllare entrambi i temi
Prova ogni coppia di testo e sfondo di entrambi i temi per il contrasto. Un colore che funziona sul bianco può fallire sul quasi nero, e il controllo richiede un minuto con uno strumento di contrasto e i codici esadecimali che hai appena prodotto.
Quando hai solo un'idea approssimativa del colore
Parti dal cerchio, poi affina
A volte non hai affatto un codice esadecimale, solo un'idea: un blu calmo, un arancione caldo, un verde fresco. HSL è un buon punto di partenza, perché puoi scegliere una tinta dai punti di riferimento del cerchio, impostare una saturazione moderata e una luminosità media, e poi convertire HSL in HEX per vedere che cosa hai. Se sembra troppo squillante, abbassa la saturazione; se sembra piatto, sposta la luminosità. Ogni prova costa secondi, e finisci con un codice esadecimale che puoi mettere direttamente in un foglio di stile.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare indietro, usa da HEX a HSL. 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 fa per le lunghezze ciò che questa pagina fa per i colori.
Un esempio svolto
Diciamo che hai scelto un verde per lo stato di successo di un'app: hsl(145, 55%, 38%). Lo digiti e leggi #2C9658. Usi quel codice nel file di token come --success. Per lo sfondo di un avviso di successo prendi la stessa tinta, hsl(145, 45%, 94%), e leggi #E9F7EF. Per il bordo, hsl(145, 45%, 78%), che dà #AEE0C3. Tre codici, una tinta, tutti ricavati in un minuto, e ciascuno un semplice codice esadecimale che qualsiasi strumento del gruppo può aprire.
Una breve lista di controllo
Prima di convertire
Controlla l'ordine dei tre numeri: tinta, saturazione, luminosità. Decidi quale forma è il tuo originale.
Mentre converti
Digita i valori, leggi l'esadecimale e copialo con il suo simbolo del cancelletto.
Dopo aver convertito
Guarda il colore sullo schermo nel contesto, e annota i valori HSL accanto al codice per dopo.
Errori comuni
Scambiare saturazione e luminosità
L'ordine è tinta, saturazione, luminosità.
Aspettarsi di recuperare il vecchio esadecimale
Può finire a un gradino di distanza. Tieni l'originale se conta.
Confrontare la luminosità anziché il contrasto
Usa uno strumento di contrasto per testo e sfondo.
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 HSL in HEX.
Riepilogo
Per convertire HSL in HEX qui, digita la tinta in gradi e la saturazione e la luminosità in percentuale, e leggi subito il codice esadecimale. La conversione conserva il colore come lo ordina l'occhio: una tinta sul cerchio, quanto è saturo, quanto è chiaro. Le due notazioni 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 i byte esatti, tieni l'esadecimale. Non viene caricato nulla.