Converti HSL in un codice HEX
Scrivi i valori HSL e il codice HEX compare mentre digiti: hsl(217.2, 91.2%, 59.8%) corrisponde a #3B82F6. Il campo accetta virgole, spazi e l’opacità dopo una barra. Con la notazione Office puoi inserire i tre numeri 0–255 letti nella finestra Colori.
Inserisci la tonalità in gradi e la saturazione e la luminosità in percentuale. Separa i valori con virgole o spazi.
Come si converte HSL in HEX?
Trasforma saturazione e luminosità in frazioni da 0 a 1, calcola i tre canali RGB e scrivi ciascun canale come due cifre esadecimali. Il calcolo si basa sul croma, la differenza tra il canale più forte e quello più debole[1]. Se i numeri vengono da Office, scegli prima la notazione Microsoft Office (0–255). Se nel campo c’è già un colore, il selettore lo riscrive come lo stesso colore nella nuova notazione.
Formula: C = (1 − |2L − 1|) × S, il canale più forte è L + C ÷ 2 e il più debole L − C ÷ 2.
Prendi hsl(217.2, 91.2%, 59.8%). Il croma vale 0,733. Il canale più forte ha 0,965 e il più debole 0,231. Una tonalità di 217,2° sta tra il ciano e il blu, quindi il blu è il canale più forte, il rosso il più debole e il verde sta a 0,510[1].
Moltiplicati per 255, i canali danno 59, 130 e 246. In esadecimale sono 3B, 82 e F6, quindi il codice è #3B82F6. Ciascuna metà del calcolo ha il suo strumento: il convertitore HSL in RGB e il convertitore RGB in HEX.
Cosa significano tonalità, saturazione e luminosità in HSL?
Il primo valore è la tonalità, data come angolo sulla ruota dei colori. I colori primari dello schermo distano tra loro 120 gradi: il rosso a 0°, il verde a 120° e il blu a 240°, e 360° torna a essere rosso[2].
Il secondo valore è la saturazione. Al 100% il colore è del tutto saturo, e allo 0% diventa un grigio su cui la tonalità non influisce più. Il terzo valore è la luminosità. Dà il nero allo 0%, il bianco al 100% e il colore pieno di una tonalità al 50%[2].
Il CSS accetta la tonalità anche in altre unità di angolo. Un giro completo vale 360 gradi, 400 gradianti, 2π radianti oppure un giro scritto come 1turn[3]. Il convertitore le legge tutte, quindi 0.25turn dà lo stesso colore di 90°.
Il modello HSL è stato descritto nel 1978, e già nel 1979 Tektronix ha presentato terminali grafici in cui i colori si impostavano in HSL[1].
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.
Come si ottengono sfumature più chiare e più scure di un colore in HSL?
hsl(217.2, 91.2%, 59.8%) e i codici HEX che ne risultano.| Luminosità | HSL | Codice HEX |
|---|---|---|
| 10% | hsl(217.2, 91.2%, 10%) | #021431 |
| 20% | hsl(217.2, 91.2%, 20%) | #042862 |
| 30% | hsl(217.2, 91.2%, 30%) | #073C92 |
| 40% | hsl(217.2, 91.2%, 40%) | #0950C3 |
| 50% | hsl(217.2, 91.2%, 50%) | #0B64F4 |
| 60% | hsl(217.2, 91.2%, 60%) | #3C83F6 |
| 70% | hsl(217.2, 91.2%, 70%) | #6DA2F8 |
| 80% | hsl(217.2, 91.2%, 80%) | #9DC1FB |
| 90% | hsl(217.2, 91.2%, 90%) | #CEE0FD |
Quali codici HEX hanno le tonalità distanti 30 gradi?
| Tonalità | Tonalità nella specifica CSS | HSL | Codice HEX |
|---|---|---|---|
| 0° | rossi | hsl(0, 100%, 50%) | #FF0000 |
| 30° | rosso-gialli, cioè arancioni | hsl(30, 100%, 50%) | #FF8000 |
| 60° | gialli | hsl(60, 100%, 50%) | #FFFF00 |
| 90° | giallo-verdi | hsl(90, 100%, 50%) | #80FF00 |
| 120° | verdi | hsl(120, 100%, 50%) | #00FF00 |
| 150° | verde-ciano | hsl(150, 100%, 50%) | #00FF80 |
| 180° | ciano | hsl(180, 100%, 50%) | #00FFFF |
| 210° | ciano-blu | hsl(210, 100%, 50%) | #0080FF |
| 240° | blu | hsl(240, 100%, 50%) | #0000FF |
| 270° | blu-magenta | hsl(270, 100%, 50%) | #8000FF |
| 300° | magenta | hsl(300, 100%, 50%) | #FF00FF |
| 330° | magenta-rossi | hsl(330, 100%, 50%) | #FF0080 |
Che codice HEX danno i numeri della finestra Colori di Office?
| Valori in Office | Codice HEX | Lo stesso colore in CSS |
|---|---|---|
| 0, 255, 128 | #FF0101 | hsl(0, 100%, 50.2%) |
| 42, 255, 128 | #FFFF01 | hsl(60, 100%, 50.2%) |
| 85, 255, 128 | #01FF01 | hsl(120, 100%, 50.2%) |
| 127, 255, 128 | #01FFFF | hsl(180, 100%, 50.2%) |
| 170, 255, 128 | #0101FF | hsl(240, 100%, 50.2%) |
| 213, 255, 128 | #FF01FF | hsl(300, 100%, 50.2%) |
| 154, 233, 153 | #3C83F6 | hsl(217.1, 91.2%, 60%) |
| 170, 0, 128 | #808080 | hsl(0, 0%, 50.2%) |
| 0, 0, 255 | #FFFFFF | hsl(0, 0%, 100%) |
| 0, 0, 0 | #000000 | hsl(0, 0%, 0%) |
Quali scritture del colore in HSL gestisce questo convertitore?
| Cosa scrivi | Risultato del convertitore | Come lo leggiamo |
|---|---|---|
| hsl(217.2, 91.2%, 59.8%) | #3B82F6 | La vecchia scrittura CSS con le virgole la leggiamo come quella nuova |
| hsl(217.2 91.2% 59.8%) | #3B82F6 | La nuova scrittura CSS con gli spazi la accettiamo senza alcuna modifica |
| 217,2 91,2 59,8 | #3B82F6 | Solo numeri con la virgola decimale, senza parentesi e senza percentuali: li riconosciamo dall’ordine |
| H: 217.2 S: 91.2% L: 59.8% | #3B82F6 | Le lettere dei canali con i due punti, come le scrive un manuale del marchio, le saltiamo e prendiamo i numeri |
| hsl(217.2 91.2% 59.8% / 50%) | #3B82F680 | L’opacità indicata dopo la barra la aggiungiamo al risultato come gli ultimi due caratteri del codice |
| 180°, 100%, 50% | #00FFFF | Il simbolo del grado accanto alla tonalità non dà fastidio, leggiamo solo il numero |
| color: hsl(217, 91%, 60%); | #3C83F6 | Incolla l’intera riga dal foglio di stile, il colore lo tiriamo fuori noi |
| 154, 233, 153 | #3C83F6 | Tre numeri sulla scala 0–255, cioè la notazione Microsoft Office della finestra Colori di Word ed Excel: con il selettore Notazione così, li leggiamo come percentuali |
Dove trovi i valori HSL e dove incolli il codice HEX?
I primi due posti ti danno valori HSL da convertire, i due successivi ricevono il codice HEX già pronto.
Finestra Colori di Office
Apri Riempimento forma e scegli Altri colori di riempimento[5]. Nella scheda Personalizzato imposta il modello di colore su HSL e copia i numeri dalle caselle Tonalità, Sat e Lum. Nel convertitore scegli la notazione Microsoft Office (0–255).Foglio di stile CSS
Cercahsl(ohsla(nel file e copia il valore intero, parentesi comprese. Il convertitore lo accetta con virgole, spazi e l’opacità dopo una barra.Documenti, Fogli e Presentazioni Google
Nella barra degli strumenti fai clic su Colore testo o su un altro strumento con opzioni di colore. Nella sezione Personalizzato fai clic su Aggiungi un colore personalizzato, incolla il codice HEX e fai clic su OK[6].Figma
Fai clic sul campione del riempimento nella barra laterale destra. Nell’elenco dei modelli di colore sotto i cursori scegli Hex[7] e incolla il codice nel campo accanto.
Converti altre unità in HEX
Converti HSL in altre unità
Fonti
- HSL and HSV — Wikipedia (in inglese)
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- 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
- Cambiare il colore di testo, oggetti e sfondi — Guida di Editor di documenti Google
- Update fills using the color picker — Figma Help Center
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 HSL a HEX
Perché hsl(217, 91%, 60%) dà un codice diverso da #3B82F6?
HSL arrotondato all’intero descrive il colore con meno precisione. hsl(217, 91%, 60%) dà #3C83F6, mentre #3B82F6 corrisponde a hsl(217.2, 91.2%, 59.8%). Quanti colori cambiano con questo arrotondamento lo mostra una tabella nel convertitore HEX in HSL.
Come inserisco un colore HSL con trasparenza?
Aggiungi l’opacità dopo una barra, per esempio hsl(217.2 91.2% 59.8% / 50%), oppure indicala come quarto valore di hsla()[2]. Il convertitore dà allora il codice di otto caratteri #3B82F680, le cui ultime due cifre contengono l’opacità.
Cosa succede se scrivo una saturazione fuori da 0–100%?
Il convertitore la porta al limite dell’intervallo, quindi 150% conta come 100%. Un valore negativo conta come 0%, come richiede la specifica CSS[2]. Per la luminosità vale lo stesso.
Una tonalità di 360° è lo stesso colore di 0°?
Sì. La tonalità è un angolo, quindi 360° è lo stesso rosso di 0°[2]. Per lo stesso motivo 480° dà lo stesso verde di 120°, e −120° lo stesso blu di 240°.
Come converto HSL in valori RGB?
Inserisci il valore nel convertitore HSL in RGB, che dà tre canali da 0 a 255. Per hsl(217.2, 91.2%, 59.8%) il risultato è rgb(59, 130, 246).
Come porto un colore dalla finestra di Office in un foglio di stile?
Scegli la notazione Microsoft Office (0–255) e inserisci i tre numeri della finestra Colori. Il codice HEX del campo del risultato si incolla direttamente nel CSS, e il convertitore HEX in HSL dà lo stesso colore in gradi e percentuali.
Aiutaci a migliorare i nostri strumenti
Hai un’idea, hai trovato un errore o vuoi proporre uno strumento? Scrivici.