HSL (kleurruimte)

Uit Wikipedia, de vrije encyclopedie
Ga naar: navigatie, zoeken

HSL (of HLS, van het Engelse: Hue, Saturation, Lightness) is een kleurruimte die gebruikt wordt om kleuren te definiëren, en om om te zetten van/naar RGB-kleuren. De term 'Lightness' wordt soms verwisseld met 'Luminance' of 'Intensity'. Dit laatste geeft de afkorting HSI, waarmee dus ditzelfde systeem wordt bedoeld. HSV (=HSB) is een ander kleursysteem met een vergelijkbare opzet en gebruik.

Drie dimensies[bewerken]

3D-kleurenkegel

Het weergeven van kleuren met de drie dimensies, zoals in HSL, levert een driedimensionaal model op (vandaar: ruimte) waarin elke kleur een eigen punt heeft. Zo is de RGB-kleurruimte een kubus, met op elke kleur-as Rood, Groen, Blauw een intensiteit van die kleur (0-100%, of hexadecimaal 00-FF). De HSL-ruimte heeft de vorm van een dubbele kegel. De twee toppen vertegenwoordigen zwart en wit. De dimensies zijn:

  • Hue (Nederlands: tint), is wat we gewoonlijk 'kleur' noemen.
In het HSL-model is de kleur uitgezet in een cirkelvorm om de centrale as. Het aantal graden geeft eenduidig een tint aan. Een volle omgang van 360° over zo'n cirkel doorloopt precies de kleuren van de regenboog.
  • Saturation (Nederlands: verzadiging).
De verzadiging wordt aangegeven als de afstand tot de centrale as, in procenten (100% = de buitenrand halverwege; 0% is de centrale as, die alleen maar grijs is).
  • Lightness (Nederlands: helderheid, lichtheid, grijsheid) is de licht/donkerheid van een kleur, lopend van zwart naar wit.
Deze maat wordt aangegeven op de centrale as van het model, in procenten (100% = de witte top).

Omzetten van RGB naar HSL[bewerken]

Vanuit een RGB-kleur kan de HSL-waarde als volgt berekend worden.

\begin{array}{rlc}
\mathrm{Saturation} &= & \max \{R,G,B\} - \min \{R,G,B\} \\
\mathrm{Lightness} &= \tfrac 1 2 &(\max \{R,G,B\} + \min \{R,G,B\})
\end{array}

De HSV/HSB-waarden verschillen niet in Hue-waarde, maar wel in S- en V-waarde:

HSV/HSB:

\begin{array}{rl}
\mathrm{Saturation} &= 1 - \tfrac{\min\{R,G,B\}}{\max\{R,G,B\}} \\
\mathrm{Value} &= \max \{R,G,B\}
\end{array}

Vergelijking van HSL en HSV/HSB[bewerken]

De definitie van de H-waarde is identiek. De begrippen Saturation zijn verschillend (hoewel wel met hetzelfde woord); de derde component is verschillend en heeft een andere naam: Lightness versus Value.

HSL komt in het gebruik sterk overeen met HSV/HSB. HSL heeft een (nog) betere weergave van en onderscheid tussen de menselijke begrippen 'verzadiging' en 'helderheid'. Daarom ook wordt HSL verkozen door ontwerpers en kunstenaars.


Voorbeelden[bewerken]

RGB (*100%) RGB (dec) HSL HSV/HSB Resultaat
(1, 0, 0) (255, 0, 0) (0°, 1, 0.5) (0°, 1, 1)                   
(0.5, 1, 0.5) (127, 255, 127) (120°, 0.5, 0.75) (120°, 0.5, 1)                   
(0, 0, 0.5) (0, 0, 127) (240°, 0.5, 0.25) (240°, 1, 0.5)    

Zie ook[bewerken]

Externe links[bewerken]