O kolorze HSL

Kolor HSL to model barw opisujący kolory za pomocą odcienia, nasycenia i jasności. W przeciwieństwie do RGB, które bezpośrednio określa natężenie czerwonego, zielonego i niebieskiego światła, HSL oddziela ton koloru, żywość i jasność, dlatego jest przydatny przy korekcji kolorów i pracy z CSS.

Na przykład główne kolory, takie jak czerwony, można przedstawić następująco.

Aby uwzględnić przezroczystość, dodaj wartość alfa. Na przykład półprzezroczoną czerwień można zapisać jako hsl(0deg 100% 50% / 0.5).

Jako wejście można użyć zapisu rozdzielonego spacjami hsl(0deg 100% 50%), a także starszego zapisu rozdzielonego przecinkami hsl(0deg, 100%, 50%).

Obsługa odcienia, nasycenia i jasności

Odcień jest traktowany jako kąt; wartości większe niż 360deg lub ujemne są normalizowane do zakresu od 0deg do 360deg. Na przykład hsl(360deg 100% 50%) jest traktowane jako ten sam kolor co hsl(0deg 100% 50%), a hsl(-120deg 100% 50%) jako ten sam kolor co hsl(240deg 100% 50%).

Nasycenie i jasność są obsługiwane w zakresie od 0% do 100%. Gdy nasycenie wynosi 0%, kolor staje się achromatyczną szarością niezależnie od odcienia. Gdy jasność wynosi 0%, kolor jest czarny; gdy wynosi 100%, jest biały.

Różnica między HSL a RGB

RGB bezpośrednio określa składniki czerwony, zielony i niebieski, dlatego jest bliskie wyświetlaniu na ekranie i danym obrazu. HSL oddziela odcień, nasycenie i jasność, ułatwiając operacje takie jak „rozjaśnić przy tym samym odcieniu” lub „zmniejszyć tylko nasycenie”.

HSL nie jest jednak percepcyjnie równomierną przestrzenią barw. Gdy potrzebna jest łatwiejsza obsługa jasności wizualnej lub różnic kolorów, można użyć przestrzeni barw takich jak Lab, LCH, Oklab i Oklch.