HSL

Skrót od „Hue, Saturation, Lightness”.

HSL to model kolorów, który definiuje kolory jako zestawy trzech atrybutów, podobnie jak model kolorów RGB. Najpierw określa punkt na kole barw, a następnie dostosowuje nasycenie i jasność, aby utworzyć końcowy kolor. Graficy i projektanci stron internetowych często go używają, ponieważ ułatwia wprowadzanie niewielkich zmian kolorów bez konieczności korzystania z próbnika kolorów.

Zamiast przedstawiać kolor jako mieszankę innych kolorów, tak jak w modelu kolorów RGB, HSL używa trzech atrybutów — odcienia, nasycenia i jasności — do definiowania koloru:

• Odcień określa położenie kątowe na kole barw jako liczbę od 0 do 359º. Czysta czerwień znajduje się na górze koła i jest oznaczana wartością kątową 0º; cyjan znajduje się na przeciwległym końcu, przy wartości 180º.
• Nasycenie określa intensywność koloru jako wartość procentową od 0 do 100%. Nasycenie 0% daje kolor szary.
• Jasność określa jasność koloru jako wartość procentową od 0 do 100%. Jasność 0% oznacza kolor czarny, jasność 50% oznacza sam kolor, a jasność 100% oznacza kolor biały.

Model kolorów HSL może przedstawiać ten sam zakres kolorów co RGB, ale przy użyciu innego formatu. Na przykład jasny cyjan o wartościach RGB R:166, G:242, B:242 lub wartości (szesnastkowej #A6F2F2) jest taki sam jak kolor o odcieniu 180º, nasyceniu 75% i jasności 80%. Pliki obrazów cyfrowych nadal zapisują informacje o kolorach jako wartości RGB, nawet gdy edytor obrazów używa modelu HSL.

HSL jest uznawany za bardziej intuicyjną metodę definiowania kolorów jako zestawu liczb. Projektanci stron internetowych często określają kolory w języku CSS za pomocą HSL zamiast RGB, aby uprościć niewielkie modyfikacje. Na przykład jeśli projektant strony określił kolor za pomocą kodu CSS hsl(180, 75%, 80%), może go przyciemnić, zmniejszając wartość jasności. Gdyby próbował wprowadzić tę samą zmianę za pomocą wartości RGB, musiałby zmienić wszystkie trzy wartości o różne wielkości.

NOTE: Model kolorów HSL jest podobny do modelu HSB. HSB używa tego samego sposobu obliczania odcienia, ale zamiast jasności wykorzystuje wartość brightness — przy czym wartość 100 oznacza pełny kolor, a nie biel — co wpływa również na obliczanie nasycenia.