HSL

Staat voor "Hue, Saturation, Lightness."

HSL is een kleurmodel dat kleuren definieert als combinaties van drie kenmerken, vergelijkbaar met het RGB-kleurmodel. Het begint met het opgeven van een punt op de kleurencirkel en past vervolgens de verzadiging en helderheid aan om de uiteindelijke kleur te maken. Grafisch ontwerpers en webdesigners gebruiken het vaak omdat het een eenvoudigere manier biedt om kleine kleuraanpassingen te maken zonder een kleurkiezer te hoeven gebruiken.

In plaats van een kleur weer te geven als een mengsel van andere kleuren, zoals in het RGB-kleurmodel, gebruikt HSL de drie kenmerken tint, verzadiging en helderheid om een kleur te definiëren:

• Tint geeft de hoekpositie op de kleurencirkel weer als een getal tussen 0 en 359º. Puur rood bevindt zich bovenaan de cirkel, weergegeven door een hoekwaarde van 0º; cyaan bevindt zich aan het tegenovergestelde uiteinde op 180º.
• Verzadiging geeft de intensiteit van de kleur weer als een percentage tussen 0 en 100%. Een verzadiging van 0% resulteert in grijs.
• Helderheid geeft de helderheid van de kleur weer als een percentage tussen 0 en 100%. Een helderheid van 0% is zwart, een helderheid van 50% is de kleur zelf en een helderheid van 100% is wit.

Het HSL-kleurmodel kan hetzelfde kleurenbereik produceren als RGB, maar met een andere indeling. Een licht cyaan met de RGB-waarden R:166, G:242, B:242 of een (hexadecimale waarde #A6F2F2) is bijvoorbeeld hetzelfde als een kleur met een tint van 180º, een verzadiging van 75% en een helderheid van 80%. Digitale afbeeldingsbestanden slaan kleurinformatie nog steeds op als RGB-waarden, ook wanneer een afbeeldingseditor HSL gebruikt.

HSL wordt beschouwd als een intuïtievere methode om kleuren als een reeks getallen te definiëren. Webdesigners geven kleuren in CSS vaak op met HSL in plaats van RGB om kleine aanpassingen eenvoudiger te maken. Als een webdesigner bijvoorbeeld een kleur heeft opgegeven met de CSS-code hsl(180, 75%, 80%), kan die de kleur donkerder maken door het helderheidsgetal te verlagen. Als diezelfde aanpassing met RGB-waarden zou worden uitgevoerd, zouden alle drie de waarden met verschillende hoeveelheden moeten worden gewijzigd.

NOTE: Het HSL-kleurmodel lijkt op het HSB-model. Hoewel HSB dezelfde berekening voor de tint gebruikt, gebruikt het helderheid in plaats van lichtheid — waarbij een waarde van 100 staat voor volledige kleur in plaats van wit — wat ook de berekening van de verzadiging beïnvloedt.