Informazioni sul colore HSL

Il colore HSL è un modello colore che rappresenta i colori con tonalità, saturazione e luminosità. A differenza di RGB, che specifica direttamente l’intensità della luce rossa, verde e blu, HSL separa tonalità, vividezza e luminosità, risultando utile per regolare i colori e lavorare con CSS.

Ad esempio, i colori principali come il rosso possono essere rappresentati così.

Per includere la trasparenza, aggiungere un valore alfa. Ad esempio, il rosso semitrasparente può essere rappresentato come hsl(0deg 100% 50% / 0.5).

Come input si può usare la notazione separata da spazi hsl(0deg 100% 50%) e anche la notazione tradizionale separata da virgole hsl(0deg, 100%, 50%).

Gestione di tonalità, saturazione e luminosità

La tonalità è trattata come un angolo; i valori superiori a 360deg o negativi sono normalizzati nell’intervallo da 0deg a 360deg. Ad esempio, hsl(360deg 100% 50%) è trattato come lo stesso colore di hsl(0deg 100% 50%), e hsl(-120deg 100% 50%) come lo stesso colore di hsl(240deg 100% 50%).

Saturazione e luminosità sono trattate nell’intervallo da 0% a 100%. Quando la saturazione è 0%, il colore diventa un grigio acromatico indipendentemente dalla tonalità. Quando la luminosità è 0%, il colore è nero; quando è 100%, è bianco.

Differenza tra HSL e RGB

RGB specifica direttamente le componenti rosso, verde e blu, quindi è vicino alla visualizzazione su schermo e ai dati immagine. HSL separa tonalità, saturazione e luminosità, rendendo più semplici operazioni come “schiarire mantenendo la stessa tonalità” o “ridurre solo la saturazione”.

Tuttavia, HSL non è uno spazio colore percettivamente uniforme. Quando si vuole gestire meglio la luminosità visiva o le differenze di colore, si possono usare spazi colore come Lab, LCH, Oklab e Oklch.