Converti un codice HEX in HSL
Scrivi un codice HEX e i valori HSL compaiono mentre digiti: #3B82F6 corrisponde a hsl(217.2, 91.2%, 59.8%). Il risultato ha un decimale, quindi se lo reinserisci ottieni lo stesso colore. Il selettore ti dà la notazione CSS oppure i numeri 0–255 della finestra Colori di Office.
Come si converte HEX in HSL?
Scomponi il codice nei tre canali RGB e dividi ciascuno per 255. Il canale più alto e quello più basso danno la luminosità e la saturazione, e il più alto fissa la tonalità[1].
Formula: L = (max + min) ÷ 2, S = (max − L) ÷ min(L, 1 − L), e H è un angolo contato a partire dal canale più alto.
Prendi #3B82F6. I canali valgono 59, 130 e 246. Divisi per 255 danno 0,231, 0,510 e 0,965. La media tra il canale più alto e quello più basso è 0,598, quindi la luminosità è del 59,8%. La formula della saturazione dà 91,2%.
Il canale più forte è il blu, quindi il calcolo della tonalità parte da 240 gradi. Il rosso è più debole del verde, perciò si tolgono 22,8 gradi e la tonalità è 217,2°. Il colore completo in CSS si scrive hsl(217.2, 91.2%, 59.8%).
Il primo passaggio da solo lo fa il convertitore HEX in RGB, mentre il convertitore RGB in HSL parte direttamente dai valori RGB.
Che cos’è il modello di colore HSL?
HSL descrive un colore con tre valori. La tonalità (in inglese hue) è un angolo sulla ruota dei colori, dove 0° è il rosso, 120° il verde e 240° il blu. La saturazione indica quanto colore c’è: 0% dà un grigio e 100% il colore pieno. La luminosità (lightness) vale 0% per il nero e 100% per il bianco, e un colore normale sta al 50%[1].
La specifica CSS spiega a cosa serve questa notazione. Con i numeri RGB è difficile capire come ottenere una versione più chiara dello stesso colore, mentre in HSL cambi un solo valore[1].
George Joblove e Donald Greenberg hanno descritto il modello nel numero di agosto 1978 della rivista Computer Graphics, accanto al modello HSV di Alvy Ray Smith[2]. È arrivato nel CSS con CSS Color Module Level 3, diventato raccomandazione del W3C il 7 giugno 2011[3].
Se hai il colore in un’altra notazione, per esempio OKLCH, Lab o codice Android, il convertitore colori lo mostra insieme in tutte le notazioni.
Colori CSS con nome: codice HEX e HSL
| Nome in CSS | Codice HEX | HSL in CSS | HSL in Office (0–255) |
|---|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) | 170, 0, 0 |
| white | #FFFFFF | hsl(0, 0%, 100%) | 170, 0, 255 |
| red | #FF0000 | hsl(0, 100%, 50%) | 0, 255, 128 |
| lime | #00FF00 | hsl(120, 100%, 50%) | 85, 255, 128 |
| blue | #0000FF | hsl(240, 100%, 50%) | 170, 255, 128 |
| yellow | #FFFF00 | hsl(60, 100%, 50%) | 42, 255, 128 |
| aqua | #00FFFF | hsl(180, 100%, 50%) | 127, 255, 128 |
| fuchsia | #FF00FF | hsl(300, 100%, 50%) | 213, 255, 128 |
| silver | #C0C0C0 | hsl(0, 0%, 75.3%) | 170, 0, 192 |
| gray | #808080 | hsl(0, 0%, 50.2%) | 170, 0, 128 |
| maroon | #800000 | hsl(0, 100%, 25.1%) | 0, 255, 64 |
| olive | #808000 | hsl(60, 100%, 25.1%) | 42, 255, 64 |
| green | #008000 | hsl(120, 100%, 25.1%) | 85, 255, 64 |
| purple | #800080 | hsl(300, 100%, 25.1%) | 213, 255, 64 |
| teal | #008080 | hsl(180, 100%, 25.1%) | 127, 255, 64 |
| navy | #000080 | hsl(240, 100%, 25.1%) | 170, 255, 64 |
| orange | #FFA500 | hsl(38.8, 100%, 50%) | 27, 255, 128 |
| rebeccapurple | #663399 | hsl(270, 50%, 40%) | 191, 128, 102 |
In cosa HSL è diverso da HSB e dalla scala di Office?
| Codice HEX | HSL in CSS | HSB | HSL in Office (0–255) |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | 217,2°; 76%; 96,5% | 154, 233, 153 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | 0°; 71,5%; 93,7% | 0, 215, 154 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | 142,1°; 82,7%; 77,3% | 100, 180, 116 |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | 37,7°; 95,5%; 96,1% | 26, 235, 128 |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | 258,3°; 62,6%; 96,5% | 183, 228, 169 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | 217,2°; 49,2%; 23,1% | 154, 83, 45 |
| #FAFAFA | hsl(0, 0%, 98%) | 0°; 0%; 98% | 170, 0, 250 |
| #333333 | hsl(0, 0%, 20%) | 0°; 0%; 20% | 170, 0, 51 |
Quanti decimali servono in HSL?
| Codice HEX | Risultato del convertitore | Stessi valori arrotondati | Colore dai valori arrotondati |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | hsl(217, 91%, 60%) | #3C83F6 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | hsl(0, 84%, 60%) | #EF4343 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | hsl(142, 71%, 45%) | #21C45D |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | hsl(38, 92%, 50%) | #F59F0A |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | hsl(258, 90%, 66%) | #895AF6 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | hsl(217, 33%, 18%) | #1F2A3D |
style.color e lo abbiamo riletto con getComputedStyle.Quali scritture del codice HEX gestisce questo convertitore?
| Cosa scrivi | Risultato del convertitore | Come lo leggiamo |
|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | Un codice con il cancelletto, esattamente come sta nel foglio di stile |
| 3b82f6 | hsl(217.2, 91.2%, 59.8%) | Il cancelletto non serve, e le minuscole le leggiamo come le maiuscole |
| #38F | hsl(215, 100%, 60%) | La forma breve a tre caratteri la estendiamo noi: #38F lo leggiamo come #3388FF |
| #3B82F680 | hsla(217.2, 91.2%, 59.8%, 0.5) | Gli ultimi due caratteri sono l’opacità: ce la portiamo dietro e diamo il risultato in hsla |
| color: #3B82F6; | hsl(217.2, 91.2%, 59.8%) | Incolla l’intera riga dal foglio di stile o dagli strumenti del browser, il codice lo tiriamo fuori noi |
| "#3B82F6" | hsl(217.2, 91.2%, 59.8%) | Le virgolette di un file JSON o di JavaScript le saltiamo e leggiamo solo il codice |
| ##3B82F6 | hsl(217.2, 91.2%, 59.8%) | Il doppio cancelletto che viene fuori incollando accanto a uno già scritto non rovina nulla |
| #EF4444 | 0, 215, 154 | Con il selettore Notazione su Microsoft Office il risultato arriva sulla scala 0–255, quella della finestra Colori di Word ed Excel |
Dove userai il risultato HSL?
I fogli di stile e i browser lavorano con la notazione CSS, i programmi di Office con la scala 0–255, quindi scegli la notazione giusta nel selettore prima di copiare il risultato.
Foglio di stile CSS
Incolla il risultato come valore di una proprietà, per esempiocolor: hsl(217.2, 91.2%, 59.8%);. Il CSS accetta anche la forma separata da spazi con l’opacità dopo una barra:hsl(217.2 91.2% 59.8% / 50%)[1].Figma
Seleziona il livello e fai clic sul campione del riempimento nella barra laterale destra. Sotto i cursori di tonalità e opacità apri l’elenco dei modelli di colore e scegli HSL[4].PowerPoint, Word ed Excel
Seleziona una forma, apri Riempimento forma e scegli Altri colori di riempimento[6]. Nella scheda Personalizzato imposta il modello di colore su HSL e scrivi i tre numeri di Office nelle caselle Tonalità, Sat e Lum.Chrome
Fai clic con il tasto destro sull’elemento e scegli Ispeziona. Nel riquadro degli stili fai clic sul campione di colore tenendo premuto Maiusc e sceglihsl(X X X / X)dall’elenco che si apre[7]. Il valore nel riquadro passa allora a HSL.
Converti altre unità in HSL
Converti HEX in altre unità
Fonti
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- HSL and HSV — Wikipedia (in inglese)
- CSS Color Module Level 3 — HSL color values — W3C
- Update fills using the color picker — Figma Help Center
- Scelta dei colori nella finestra di dialogo Colori — Microsoft Support
- Aggiungere un riempimento o un effetto a una forma o una casella di testo — Microsoft Support
- Ispeziona ed esegui il debug dei colori HD e non HD con il selettore colori — Chrome for Developers
Tutti i valori delle tabelle sono stati calcolati dalle definizioni delle unità e verificati con il calcolo prima della pubblicazione. I dati storici e i nomi delle unità locali si basano sulle fonti elencate sopra.
Ultima revisione dei contenuti: · scritto e verificato dal team Arteon
Domande frequenti sulla conversione da HEX a HSL
Quale notazione HSL scelgo nel convertitore?
Scegli CSS per i fogli di stile e gli strumenti per sviluppatori del browser. Scegli Microsoft Office (0–255) quando riporti il colore nella finestra Colori di Word, Excel o PowerPoint, perché lì ciascuno dei tre valori va da 0 a 255[5].
Perché un colore inserito in Office torna con un altro codice HEX?
La finestra Colori calcola HSL con numeri interi su una scala da 0 a 255, e in quel calcolo si perde un po’ di precisione. Lo abbiamo verificato in Office 2016: #3B82F6 compare come 154, 233 e 153, e questi tre numeri reinseriti danno #3C83F6. Il convertitore usa lo stesso algoritmo, quindi ti mostra esattamente il colore che vedrai nel programma. Per inserire numeri letti nella finestra, usa il convertitore HSL in HEX con la notazione Office.
Come scrivo un colore HSL con trasparenza?
Inserisci un codice di otto caratteri, per esempio #3B82F680. Il convertitore dà allora hsla(217.2, 91.2%, 59.8%, 0.5), dove il quarto numero è l’opacità da 0 a 1[1]. La notazione Office dà solo i tre numeri di tonalità, saturazione e luminosità.
Perché giallo e blu hanno la stessa luminosità in HSL?
La luminosità HSL è la media tra il canale più forte e quello più debole, quindi non corrisponde a quanto un colore appare chiaro all’occhio. La specifica CSS usa proprio questo esempio: hsl(60 100% 50%) e hsl(240 100% 50%) hanno entrambi 50%, ma il giallo appare molto più chiaro[1].
Come ottengo una sfumatura più chiara di un colore in HSL?
Lascia invariate tonalità e saturazione e alza solo la luminosità. hsl(217.2, 91.2%, 59.8%) con luminosità al 70% dà #6DA2F8. Una scala di luminosità pronta e la conversione di qualsiasi valore HSL in codice si trovano nel convertitore HSL in HEX.
Un colore in HSL ha lo stesso contrasto che in HEX?
Sì, perché le due notazioni descrivono lo stesso colore e il contrasto dipende dal colore. Incolla il risultato nel verificatore di contrasto dei colori, che accetta HSL come un codice HEX.
Aiutaci a migliorare i nostri strumenti
Hai un’idea, hai trovato un errore o vuoi proporre uno strumento? Scrivici.