Kolory HTML HSL i HSLA
HSL oznacza odcień, nasycenie i lekkość.
Wartości kolorów HSLA są rozszerzeniem HSL o kanał alfa (nieprzezroczystość).
Wartości kolorów HSL
W HTML kolor można określić za pomocą barwy, nasycenia i jasności (HSL) w postaci:
hsl( odcień , nasycenie , jasność )
Barwa to stopień na kole kolorów od 0 do 360. 0 to czerwony, 120 to zielony, a 240 to niebieski.
Nasycenie jest wartością procentową, 0% oznacza odcień szarości, a 100% to pełny kolor.
Jasność jest również wartością procentową, 0% to kolor czarny, a 100% to kolor biały.
Eksperymentuj, mieszając poniższe wartości HSL:
hsl(0, 100%, 50%)
ODCIEŃ
NASYCENIE
LEKKOŚĆ
Przykład
Nasycenie
Nasycenie można opisać jako intensywność koloru.
100% to czysty kolor, bez odcieni szarości
50% to 50% szarości, ale nadal możesz zobaczyć kolor.
0% jest całkowicie szare, nie widać już koloru.
Przykład
Lekkość
Jasność koloru można opisać jako ilość światła, którą chcesz nadać kolorowi, gdzie 0% oznacza brak światła (czarny), 50% oznacza 50% jasne (ani ciemne, ani jasne) 100% oznacza pełną jasność (biały).
Przykład
Odcienie szarego
Odcienie szarości są często definiowane przez ustawienie odcienia i nasycenia na 0 oraz dostosowanie jasności od 0% do 100%, aby uzyskać ciemniejsze/jaśniejsze odcienie:
Przykład
Wartości kolorów HSLA
Wartości kolorów HSLA są rozszerzeniem wartości kolorów HSL o kanał alfa, który określa krycie koloru.
Wartość koloru HSLA jest określona za pomocą:
hsla( odcień, nasycenie , jasność, alfa )
Parametr alfa to liczba z zakresu od 0,0 (w pełni przezroczysta) do 1,0 (wcale nieprzezroczysta):
Eksperymentuj, mieszając poniższe wartości HSLA:
hsla (0, 100%, 50%, 0,5)
ODCIEŃ
NASYCENIE
LEKKOŚĆ
ALFA