CSS barvy HSL
HSL znamená odstín, sytost a světlost.
Hodnota HSL
V CSS lze barvu určit pomocí odstínu, sytosti a světlosti (HSL) ve tvaru:
hsl ( odstín , sytost , světlost )
Odstín je stupeň na barevném kole od 0 do 360. 0 je červená, 120 je zelená a 240 je modrá.
Sytost je procentuální hodnota, 0 % znamená odstín šedé a 100 % je plná barva.
Světlost je také procenta, 0 % je černá, 50 % není světlá ani tmavá, 100 % je bílá
Experimentujte smícháním hodnot HSL níže:
hsl(0, 100 %, 50 %)
ODSTÍN
NASYCENÍ
SVĚTLOST
Příklad
Nasycení
Sytost lze popsat jako intenzitu barvy.
100% je čistá barva, žádné odstíny šedé
50% je 50% šedá, ale stále vidíte barvu.
0% je úplně šedá, už není vidět barva.
Příklad
Světlost
Světlost barvy lze popsat jako množství světla, které chcete barvě dodat, kde 0 % znamená žádné světlo (černá), 50 % znamená 50 % světla (ani tmavé, ani světlé) 100 % znamená plnou světlost (bílá).
Příklad
Odstíny šedi
Odstíny šedé jsou často definovány nastavením odstínu a sytosti na 0 a úpravou světlosti od 0 % do 100 % získáte tmavší/světlejší odstíny:
Příklad
Hodnota HSLA
Barevné hodnoty HSLA jsou rozšířením hodnot barev HSL o alfa kanál – který určuje krytí pro barvu.
Hodnota barvy HSLA je specifikována pomocí:
hsla( odstín, sytost , světlost, alfa )
Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (vůbec neprůhledné):
Experimentujte smícháním hodnot HSLA níže:
hsla (0, 100 %, 50 %, 0,5)
ODSTÍN
NASYCENÍ
SVĚTLOST
ALFA