Converti HSL in valori RGB
Scrivi i valori HSL e i canali RGB compaiono mentre digiti: hsl(217.2, 91.2%, 59.8%) corrisponde a rgb(59, 130, 246). Il risultato è sempre sulla scala da 0 a 255, e l’opacità di hsla resta uguale in rgba. Con la notazione Office inserisci i numeri della 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 RGB?
Calcola ogni canale separatamente con un’unica formula della specifica CSS. In questa formula il rosso ha il numero n uguale a 0, il verde 8 e il blu 4[1]. Saturazione e luminosità entrano come frazioni da 0 a 1.
Formula: k = (n + H ÷ 30) mod 12, a = S × min(L, 1 − L), canale = L − a × max(−1, min(k − 3, 9 − k, 1)).
Prendi hsl(0, 84.2%, 60.2%). Una luminosità di 0,602 e una saturazione di 0,842 danno a uguale a 0,335. Per il rosso k vale 0, quindi la parentesi dà −1 e il canale è 0,602 + 0,335, cioè 0,937.
Per verde e blu la parentesi dà 1. Entrambi i canali valgono quindi 0,602 − 0,335, cioè 0,267. Moltiplicati per 255 e arrotondati danno rgb(239, 68, 68). Chromium 151, in cui l’abbiamo provato, dà lo stesso risultato.
Il convertitore HSL in HEX dà il codice HEX di questo colore. Il convertitore RGB in HSL fa il percorso inverso.
Come si traduce HSL in canali RGB?
La tonalità decide il colore sulla ruota dei colori, cioè quali canali RGB sono forti e quali deboli. A 0° il canale più forte è il rosso, a 120° il verde e a 240° il blu[1].
La saturazione indica quanto i canali sono distanti tra loro. Allo 0% sono tutti e tre uguali e il colore è grigio. La luminosità fissa il livello di tutti i canali insieme: allo 0% ognuno vale 0, al 100% ognuno vale 255, e al 50% il colore ha la sua forma normale[1].
Il CSS ha due sintassi per questa notazione. In quella vecchia i valori sono separati da virgole, e saturazione e luminosità richiedono il segno di percentuale. In quella nuova li separano gli spazi, l’opacità segue una barra, e saturazione e luminosità si possono scrivere senza segno di percentuale[1]. Il convertitore le legge entrambe, quindi hsl(217.2 91.2 59.8) dà lo stesso risultato di hsl(217.2, 91.2%, 59.8%).
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 cambia la saturazione i valori RGB?
hsl(217.2, 91.2%, 59.8%) scende a passi di 10 punti, dal 100% allo 0%. Tonalità e luminosità restano uguali, così vedi la distanza tra i canali ridursi.| Saturazione | HSL | Valori RGB |
|---|---|---|
| 100% | hsl(217.2, 100%, 59.8%) | 50, 128, 255 |
| 90% | hsl(217.2, 90%, 59.8%) | 60, 130, 245 |
| 80% | hsl(217.2, 80%, 59.8%) | 70, 133, 234 |
| 70% | hsl(217.2, 70%, 59.8%) | 81, 135, 224 |
| 60% | hsl(217.2, 60%, 59.8%) | 91, 138, 214 |
| 50% | hsl(217.2, 50%, 59.8%) | 101, 140, 204 |
| 40% | hsl(217.2, 40%, 59.8%) | 111, 143, 193 |
| 30% | hsl(217.2, 30%, 59.8%) | 122, 145, 183 |
| 20% | hsl(217.2, 20%, 59.8%) | 132, 148, 173 |
| 10% | hsl(217.2, 10%, 59.8%) | 142, 150, 163 |
| 0% | hsl(217.2, 0%, 59.8%) | 152, 152, 152 |
Come si scrive la tonalità in gradi, gradianti, radianti e giri?
| Notazione CSS | Angolo in gradi | Valori RGB |
|---|---|---|
| hsl(90deg, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(90, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(100grad, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(0.25turn, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(1.5708rad, 100%, 50%) | 90,0002° | 127, 255, 0 |
| hsl(1.570796rad, 100%, 50%) | 89,99998° | 128, 255, 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%) | rgb(59, 130, 246) | La notazione CSS con le virgole la accettiamo senza modifiche |
| H 217.2 S 91.2 L 59.8 | rgb(59, 130, 246) | Le lettere dei canali e l’assenza di percentuali non danno fastidio, leggiamo i numeri nell’ordine |
| hsla(217,2, 91,2%, 59,8%, 0,5) | rgba(59, 130, 246, 0.5) | La virgola decimale funziona anche nell’opacità, non serve cambiarla in un punto |
| hsl(0.25turn, 100%, 50%) | rgb(128, 255, 0) | Una tonalità indicata in giri la convertiamo in gradi: 0.25turn sono 90° |
| hsl(-120, 100%, 50%) | rgb(0, 0, 255) | Una tonalità negativa la contiamo dalla fine della ruota dei colori, proprio come fa il browser |
| hsl(0, 150%, 50%) | rgb(255, 0, 0) | La saturazione oltre il 100% la limitiamo al 100%, proprio come fa il browser |
| color: hsl(217, 91%, 60%); | rgb(60, 131, 246) | Incolla l’intera riga dal foglio di stile, il colore lo tiriamo fuori noi |
| 154, 233, 153 | rgb(60, 131, 246) | 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 inserisci il risultato RGB?
Documenti Google e la finestra di Office accettano i valori RGB così come escono dal convertitore, mentre il codice spesso richiede il risultato in frazioni.
Documenti, Fogli e Presentazioni Google
Nella barra degli strumenti fai clic su Colore testo o su un altro strumento con opzioni di colore, poi nella sezione Personalizzato fai clic su Aggiungi un colore personalizzato. Nella finestra che si apre puoi inserire il codice esadecimale o i valori RGB[3].Finestra Colori di Office
Nella scheda Personalizzato lascia il modello di colore su RGB e scrivi i tre numeri nelle caselle Rosso, Verde e Blu[4]. Nella nostra prova in Office 2016 queste caselle accettavano valori da 0 a 255.Python
colorsys.hls_to_rgb(h, l, s)accetta la luminosità prima della saturazione e tutti e tre i valori come frazioni da 0 a 1[5]. Anche il risultato è in frazioni, quindi moltiplica ogni canale per 255 per ottenere i numeri del convertitore.JavaScript
La specifica CSS contiene una funzione pronta,hslToRgb(hue, sat, light), che accetta la tonalità in gradi e saturazione e luminosità da 0 a 100[1]. Restituisce canali da 0 a 1, e il convertitore usa la stessa formula.
Converti altre unità in RGB
Converti HSL in altre unità
Fonti
- CSS Color Module Level 4 — Converting HSL Colors to sRGB — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- Cambiare il colore di testo, oggetti e sfondi — Guida di Editor di documenti Google
- Scelta dei colori nella finestra di dialogo Colori — Microsoft Support
- colorsys — Conversions between color systems — Python Software Foundation
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 RGB
Perché il risultato RGB riconvertito dà un valore HSL leggermente diverso?
I canali RGB accettano solo numeri interi, quindi più valori HSL danno lo stesso colore. hsl(217, 91%, 60%) dà rgb(60, 131, 246), e questo colore riconvertito è hsl(217.1, 91.2%, 60%). Entrambi descrivono esattamente lo stesso colore sullo schermo.
Come converto in RGB i numeri della finestra Colori di Office?
Scegli la notazione Microsoft Office (0–255) e inserisci i tre numeri della finestra. I valori 154, 233 e 153 danno rgb(60, 131, 246), perché la finestra calcola HSL su una scala da 0 a 255[4] e perde un po’ di precisione. Inserisci i numeri dopo aver cambiato notazione, perché il selettore riscrive il colore già presente nel campo come lo stesso colore nella nuova notazione.
Posso scrivere saturazione e luminosità senza segno di percentuale?
Sì. Il convertitore legge i numeri semplici come fa la nuova sintassi CSS, quindi 217.2 91.2 59.8 dà rgb(59, 130, 246)[1].
Come ottengo i canali RGB come frazioni da 0 a 1?
Converti il valore HSL in codice con il convertitore HSL in HEX, poi inserisci quel codice nel convertitore HEX in RGB con il selettore su 0–1. Per hsl(217.2, 91.2%, 59.8%) ottieni 0,2314, 0,5098 e 0,9647.
Il browser mostra lo stesso colore del convertitore?
Sì. Lo abbiamo provato in Chromium 151 su tutti i 16 777 216 colori: i valori HSL dati dai nostri convertitori hanno prodotto nel browser esattamente i canali RGB di partenza.
Come imposto in RGB un colore con trasparenza?
Aggiungi l’opacità al valore HSL, per esempio hsla(217.2, 91.2%, 59.8%, 0.5). Il convertitore dà rgba(59, 130, 246, 0.5), e il quarto numero resta uguale.
Aiutaci a migliorare i nostri strumenti
Hai un’idea, hai trovato un errore o vuoi proporre uno strumento? Scrivici.