HSL barvy

HSL je zkratka pro Hue (Odstín) Saturation (Sytost) Lightness (Jas).

Odstín vybíráme ve stupních z následujícího barevného kola:

Potom vybereme sytost a jas v procentech. Příklad:

p {
	color: hsl(180, 100%, 50%);
}

Vybere odstín odpovídající 180. stupni barevného kola, tudíž světle modrou, se 100% sytostí a 50% jasem. Tímto způsobem bude světle modrá barva vypadat stejně jak ji vidíte na barevném kole.

Abychom vytvořili černou barvu mohl by být jakýkoliv odstín a jakákoliv sytost, jediné co potřebujeme je 0% jas. Pro bílou také nezáleží na odstínu a sytosti, jen potřebujeme 100% jas.

Výhoda HSL barev je, že když potřebujeme o trochu tmavší nebo světlejší barvu, tak stačí snížit nebo zvýšit jas, kdežto u RGB nebo Hexadecimálních barev by to vyžadovalo snížení nebo zvýšení všech barevných složek.