Over HSL-kleur

HSL-kleur is een kleurmodel dat kleuren weergeeft met tint, verzadiging en lichtheid. In tegenstelling tot RGB, dat de sterkte van rood, groen en blauw licht direct opgeeft, scheidt HSL kleurtoon, levendigheid en helderheid, waardoor het handig is voor kleurcorrecties en CSS-ontwerp.

Belangrijke kleuren zoals rood kunnen bijvoorbeeld als volgt worden weergegeven.

Voeg een alfawaarde toe om transparantie op te nemen. Halftransparant rood kan bijvoorbeeld worden weergegeven als hsl(0deg 100% 50% / 0.5).

Als invoer kunt u de spatiegescheiden notatie hsl(0deg 100% 50%) gebruiken, maar ook de oudere kommagescheiden notatie hsl(0deg, 100%, 50%).

Behandeling van tint, verzadiging en lichtheid

Tint wordt als hoek behandeld; waarden groter dan 360deg of negatieve waarden worden genormaliseerd naar het bereik van 0deg tot 360deg. Bijvoorbeeld, hsl(360deg 100% 50%) wordt behandeld als dezelfde kleur als hsl(0deg 100% 50%), en hsl(-120deg 100% 50%) als dezelfde kleur als hsl(240deg 100% 50%).

Verzadiging en lichtheid worden behandeld in het bereik van 0% tot 100%. Bij 0% verzadiging wordt de kleur een achromatische grijstint, ongeacht de tint. Bij 0% lichtheid is de kleur zwart; bij 100% is de kleur wit.

Verschil tussen HSL en RGB

RGB specificeert de rode, groene en blauwe componenten direct en ligt daardoor dicht bij schermweergave en afbeeldingsgegevens. HSL scheidt tint, verzadiging en lichtheid, waardoor bewerkingen zoals “lichter maken met dezelfde tint” of “alleen de verzadiging verlagen” eenvoudiger zijn.

HSL is echter geen perceptueel uniforme kleurruimte. Wanneer visuele helderheid of kleurverschillen gemakkelijker moeten worden behandeld, kunnen kleurruimten zoals Lab, LCH, Oklab en Oklch worden gebruikt.