Converti i valori RGB in HSL

Ultima revisione dei contenuti:

Scrivi tre canali RGB e i valori HSL compaiono mentre digiti: rgb(59, 130, 246) corrisponde a hsl(217.2, 91.2%, 59.8%). Il campo accetta numeri con o senza parentesi e riconosce i canali scritti come frazioni da 0 a 1. Il selettore ti dà la notazione CSS o la scala di Office.

Notazione HSL

La notazione CSS corrisponde ai fogli di stile e agli strumenti per sviluppatori del browser. La notazione 0–255 è quella della finestra Colori in Word, Excel e PowerPoint.

in

Come si converte RGB in HSL?

Dividi ogni canale per 255 e trova il più grande e il più piccolo. La luminosità è la media di questi due valori. La saturazione deriva dalla loro differenza, e la tonalità dal canale più forte[1].


Formula: Δ = max − min, L = (max + min) ÷ 2, S = Δ ÷ (1 − |2L − 1|), e quando il rosso è il canale più forte, H = 60° × ((G − B) ÷ Δ).


Prendi rgb(239, 68, 68). Diviso per 255, il rosso vale 0,937, mentre verde e blu valgono 0,267 ciascuno. La loro media è 0,602, quindi la luminosità è del 60,2%. La differenza, 0,671, dà una saturazione dell’84,2%.


Verde e blu sono uguali, quindi la tonalità è 0°. Il colore completo è hsl(0, 84.2%, 60.2%). Quando il canale più forte è il verde, la tonalità si conta da 120°, per questo rgb(34, 197, 94) dà hsl(142.1, 70.6%, 45.3%).


Il convertitore RGB in HEX dà i codici HEX di questi colori, e il convertitore HEX in HSL parte da un codice.

In cosa HSL è diverso da RGB?

RGB descrive un colore con le quantità di luce rossa, verde e blu che lo schermo combina in un pixel. HSL descrive lo stesso colore con la tonalità, la quantità di colore e la luminosità. La specifica CSS osserva che con i numeri RGB è difficile capire come schiarire un colore mantenendone la tonalità[1].


Le due notazioni coprono lo stesso spazio sRGB. Un colore scritto in HSL nel CSS viene convertito dal browser in sRGB[1], per questo ogni colore HSL si può scrivere come tre canali RGB e viceversa.


Gli autori del modello, George Joblove e Donald Greenberg, nel 1978 chiamarono le sue dimensioni in un altro modo: hue, relative chroma e intensity[2]. La specifica CSS le chiama hue, saturation e lightness, in italiano tonalità, saturazione e luminosità[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.

Quali valori HSL hanno i grigi RGB?

Quando i tre canali sono uguali il colore è grigio e la sua saturazione è dello 0%. A decidere se il grigio è chiaro o scuro resta solo la luminosità, e la tonalità non influisce sul risultato[1].
Valori RGBCodice HEXHSL in CSSHSL in Office (0–255)
0, 0, 0#000000hsl(0, 0%, 0%)170, 0, 0
32, 32, 32#202020hsl(0, 0%, 12.5%)170, 0, 32
64, 64, 64#404040hsl(0, 0%, 25.1%)170, 0, 64
96, 96, 96#606060hsl(0, 0%, 37.6%)170, 0, 96
128, 128, 128#808080hsl(0, 0%, 50.2%)170, 0, 128
160, 160, 160#A0A0A0hsl(0, 0%, 62.7%)170, 0, 160
192, 192, 192#C0C0C0hsl(0, 0%, 75.3%)170, 0, 192
224, 224, 224#E0E0E0hsl(0, 0%, 87.8%)170, 0, 224
255, 255, 255#FFFFFFhsl(0, 0%, 100%)170, 0, 255
In CSS la luminosità di un grigio è il valore del canale diviso per 255. La finestra Colori di Office usa la stessa scala dei canali RGB, quindi per i grigi il suo terzo numero coincide con il valore del canale.

Come si scrive in HSL un colore RGB con opacità?

L’opacità ha lo stesso valore nelle due notazioni: il quarto numero di rgba() è il quarto numero di hsla(). La tabella mostra sette valori di opacità per rgb(59, 130, 246) insieme al codice HEX, dove l’opacità occupa le ultime due cifre.
OpacitàrgbahslaCodice HEX
100%rgba(59, 130, 246, 1)hsl(217.2, 91.2%, 59.8%)#3B82F6
90%rgba(59, 130, 246, 0.9)hsla(217.2, 91.2%, 59.8%, 0.9)#3B82F6E6
75%rgba(59, 130, 246, 0.75)hsla(217.2, 91.2%, 59.8%, 0.75)#3B82F6BF
50%rgba(59, 130, 246, 0.5)hsla(217.2, 91.2%, 59.8%, 0.5)#3B82F680
25%rgba(59, 130, 246, 0.25)hsla(217.2, 91.2%, 59.8%, 0.25)#3B82F640
10%rgba(59, 130, 246, 0.1)hsla(217.2, 91.2%, 59.8%, 0.1)#3B82F61A
0%rgba(59, 130, 246, 0)hsla(217.2, 91.2%, 59.8%, 0)#3B82F600
Con opacità 1 il convertitore dà un semplice hsl(), perché l’opacità piena è il valore predefinito.

Come si convertono in HSL i canali scritti come frazioni da 0 a 1?

Alcune librerie scrivono i canali come frazioni: il modulo colorsys di Python, per esempio, dà tutti i valori tra 0 e 1[3]. Il convertitore riconosce questa notazione quando almeno uno dei tre numeri ha decimali. Come in Python, i decimali seguono un punto.
Canali 0–1HSL in CSSHSL in Office (0–255)
0.2314, 0.5098, 0.9647hsl(217.2, 91.2%, 59.8%)154, 233, 153
0.1333, 0.7725, 0.3686hsl(142.1, 70.6%, 45.3%)100, 180, 116
0.5, 0.5, 0.5hsl(0, 0%, 50.2%)170, 0, 128
1.0, 0, 0hsl(0, 100%, 50%)0, 255, 128
Il rosso scritto come 1, 0, 0 contiene solo numeri interi, quindi il convertitore lo legge sulla scala 0–255. 1.0, 0, 0 indica frazioni e dà il rosso pieno.

Quali scritture dei valori RGB gestisce questo convertitore?

Il campo accetta e converte ognuna di queste scritture, quindi non devi sistemare nulla prima di incollare. La tabella mostra cosa ne fa il convertitore, e i risultati li ha calcolati lui stesso.
Cosa scriviRisultato del convertitoreCome lo leggiamo
rgb(59, 130, 246)hsl(217.2, 91.2%, 59.8%)La notazione CSS con le parentesi la accettiamo senza modifiche
59 130 246hsl(217.2, 91.2%, 59.8%)Bastano tre numeri separati da spazi, parentesi e virgole non servono
R: 59, G: 130, B: 246hsl(217.2, 91.2%, 59.8%)Le lettere dei canali, come le scrive un manuale del marchio, le saltiamo e prendiamo solo i numeri
rgb(23.1%, 51%, 96.5%)hsl(217.2, 91.2%, 59.8%)I canali in percentuale li riportiamo noi alla scala 0–255
rgba(59, 130, 246, 0,5)hsla(217.2, 91.2%, 59.8%, 0.5)L’opacità scritta con la virgola decimale la portiamo nel risultato in hsla
0,2314 0,5098 0,9647hsl(217.2, 91.2%, 59.8%)I canali scritti in frazioni da 0 a 1 li riconosciamo dalla virgola e li riportiamo alla scala 0–255
[59, 130, 246]hsl(217.2, 91.2%, 59.8%)Leggiamo l'array NumPy stampato da Python, parentesi quadre comprese
background-color: rgb(59, 130, 246);hsl(217.2, 91.2%, 59.8%)Incolla l’intera riga dal foglio di stile, il colore lo tiriamo fuori noi
300, -20, 128hsl(329.9, 100%, 50%)I valori fuori intervallo li limitiamo come fa il browser: 300 scende a 255 e −20 sale a 0

Come si converte RGB in HSL nel codice, in CSS e in Office?

Python, CSS e Office sanno convertire RGB in HSL da soli. Ognuno scrive il risultato in una forma diversa, quindi ecco come leggerlo in ciascun caso.

  1. Python

    colorsys.rgb_to_hls(r, g, b) accetta canali da 0 a 1 e restituisce tonalità, luminosità e saturazione in quest’ordine[3]. Per #3B82F6 la tonalità è 0,6034. È una frazione di giro completo, quindi moltiplicata per 360 dà 217,2°.

  2. CSS

    Con la sintassi relativa hsl(from rgb(59 130 246) h s calc(l + 10)) è il browser stesso a convertire RGB in HSL e ad alzare la luminosità di 10 punti[4]. Abbiamo provato questa sintassi in Chromium 151.

  3. Finestra Colori di Office

    Inserisci i canali con il modello RGB, poi imposta il modello di colore su HSL. La finestra mostra tonalità, saturazione e luminosità su una scala da 0 a 255[5], cioè gli stessi numeri che il convertitore dà con la notazione Microsoft Office (0–255).

Converti altre unità in HSL

HEX in HSL

Converti RGB in altre unità

RGB in HEXRGB in CMYKRGB in HSV

Fonti

  1. CSS Color Module Level 4 — Converting sRGB Colors to HSL — W3C
  2. HSL and HSV — Wikipedia (in inglese)
  3. colorsys — Conversions between color systems — Python Software Foundation
  4. Using relative colors — MDN Web Docs
  5. Scelta dei colori nella finestra di dialogo Colori — Microsoft Support

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 RGB a HSL

Posso inserire i canali RGB in percentuale?

Sì. Il convertitore riporta le percentuali alla scala 0–255, quindi rgb(23.1%, 51%, 96.5%) dà lo stesso risultato di rgb(59, 130, 246), cioè hsl(217.2, 91.2%, 59.8%).

Perché getComputedStyle restituisce rgb se nel CSS ho scritto hsl?

Il browser converte un colore HSL in sRGB quando calcola lo stile e scrive il valore calcolato come rgb() o rgba()[1]. Per rivedere HSL, converti qui quel risultato.

Perché colorsys di Python usa un ordine diverso dal CSS?

Il modulo colorsys chiama questo modello HLS e restituisce la luminosità prima della saturazione[3]. I valori (0.6034, 0.598, 0.912) significano quindi una tonalità di 217,2°, una luminosità del 59,8% e una saturazione del 91,2%, che in CSS si scrivono hsl(217.2, 91.2%, 59.8%).

Come torno da HSL a RGB?

Inserisci il valore nel convertitore HSL in RGB. Il pulsante Inverti ordine ti porta lì insieme al risultato attuale.

Un grigio ha una tonalità in HSL?

Con saturazione allo 0% la tonalità non cambia il colore[1], quindi il convertitore dà zero nella notazione CSS. La finestra Colori di Office mette 170 in quel punto, e il colore resta lo stesso.

Come verifico se un colore RGB si legge bene su uno sfondo?

Incolla i valori RGB o il risultato HSL nel verificatore di contrasto dei colori. Ti dà il rapporto di contrasto insieme alle soglie WCAG per il testo.

Screenshot dello strumento gratuito Arteon: Converti i valori RGB in HSL

Aiutaci a migliorare i nostri strumenti

Hai un’idea, hai trovato un errore o vuoi proporre uno strumento? Scrivici.