• Da Hex a HSL
• Passo 1: Converti Hex in RGB
• Passaggio 2: normalizzare i valori RGB
• Passaggio 3: trova i valori RGB normalizzati minimi e massimi
• Passaggio 4: calcola la tonalità (H)
• Passo 5: Calcola la leggerezza (L)
• Passo 6: Calcola la saturazione (S)
• Passaggio 7: regola la tonalità (opzionale)

Da Hex a HSL

La conversione di un colore da esadecimale (esadecimale) a HSL (tonalità, saturazione, luminosità) richiede diversi passaggi. Per prima cosa è necessario convertire il colore esadecimale in un valore RGB. È quindi possibile convertire i valori RGB in HSL. Ecco una guida dettagliata:

Passo 1: Converti Hex in RGB

Per convertire un colore esadecimale a 6 cifre (ad esempio #RRGGBB) in un  valore RGB, dividere il codice esadecimale in tre coppie di due caratteri ciascuna per il rosso (RR), il verde (GG) e il blu (BB).  Quindi convertire ogni coppia da esadecimale a decimale.

Ad esempio, se si dispone del colore esadecimale #336699:

R: 33 (esadecimale) = 3 * 16 + 3 = 51 (decimale)

G: 66 (esadecimale) = 6 * 16 + 6 = 102 (decimale)

B: 99 (esadecimale) = 9 * 16 + 9 = 153 (decimale)

Quindi, i valori RGB per #336699 sono: R = 51, G = 102, B = 153.

Passaggio 2: normalizzare i valori RGB

Normalizzare i valori RGB nell'intervallo da 0 a 1 dividendo ogni valore per 255 (il valore massimo per un canale di colore a 8 bit).

R_norm = 51 / 255 ≈ 0,2

G_norm = 102 / 255 ≈ 0,4

B_norm = 153 / 255 ≈ 0,6

Passaggio 3: trova i valori RGB normalizzati minimi e massimi

Trova i valori minimo (min_RGB) e massimo (max_RGB) tra i valori R, G e B normalizzati.

min_RGB ≈ 0,2 (in questo caso, R_norm è il più piccolo)

max_RGB ≈ 0,6 (in questo caso, B_norm è il più grande)

Passaggio 4: calcola la tonalità (H)

Il valore Tonalità (H) rappresenta il colore stesso e viene calcolato in base alle proporzioni relative dei canali RGB. È espresso come angolo in gradi (da 0° a 360°). La formula per calcolare H è:

H = 60 * ( (G_norm - B_norm) / (max_RGB - min_RGB) ) mod 360

In questo caso, H ≈ 60 * ((0,4 - 0,2) / (0,6 - 0,2)) ≈ 60 * (0,2 / 0,4) ≈ 60 * 0,5 ≈ 30 °

Passo 5: Calcola la leggerezza (L)

Il valore di Luminosità (L) rappresenta la luminosità del colore ed è calcolato come media del max_RGB e del min_RGB:

L = (max_RGB + min_RGB) / 2 ≈ (0,6 + 0,2) / 2 ≈ 0,4

Passo 6: Calcola la saturazione (S)

Il valore di Saturazione (S) rappresenta l'intensità del colore e viene calcolato in base alla luminosità e ai valori RGB massimi e minimi:

S = (max_RGB - min_RGB) / (1 - |2 * L - 1|)

S = (0,6 - 0,2) / (1 - |2 * 0,4 - 1|) ≈ 0,4 / 0,2 ≈ 2

Passaggio 7: regola la tonalità (opzionale)

A volte, la tonalità calcolata può essere negativa o superiore a 360°. In questo caso, regolare la tonalità come segue:

Se H < 0, allora H = H + 360°

Se H > 360°, allora H = H - 360°

In questo caso, H = 30° (nessuna regolazione necessaria)

Quindi, la rappresentazione HSL del colore #336699 è approssimativamente: H = 30 °, S = 2, L = 0,4. Si noti che i valori HSL sono spesso espressi con H come angolo e S e L come percentuali, quindi la rappresentazione finale può essere data come HSL (30°, 200%, 40%).