HSL to sposób zapisu koloru oparty na trzech parametrach: Hue, Saturation, Lightness, czyli odcień, nasycenie i jasność. W CSS zapisuje się go funkcją hsl().
Składnia
color: hsl(120, 100%, 25%);
Parametry oznaczają:
- Hue — odcień koloru, podawany zwykle w stopniach od 0 do 360, np. 0 to czerwony, 120 zielony, 240 niebieski,
- Saturation — nasycenie koloru, podawane w procentach; 0% oznacza odcień szarości, 100% pełne nasycenie,
- Lightness — jasność, podawana w procentach; 0% to czarny, 50% kolor standardowy, 100% biały.
Przykład
p {
color: hsl(120, 100%, 25%);
}
Ten zapis daje ciemny zielony kolor. Podobny kolor można zapisać także szesnastkowo, np. #008000.
HSL a zapis szesnastkowy
Zapis HSL wygląda inaczej niż zapis szesnastkowy. Kolor szesnastkowy zaczyna się od znaku #, np.:
color: #008000;
Natomiast HSL używa funkcji hsl():
color: hsl(120, 100%, 25%);
Na egzaminie warto zwracać uwagę na charakterystyczne elementy zapisu: # oznacza zwykle kolor szesnastkowy, a hsl(...) oznacza model HSL.