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).

Omzetting van RGB naar HSL[bewerken]

Voor deze omzetting geldt het volgende:

  • De RGB-kleuren R, G, B hebben elk een waarde in het bereik [0, 1].
  • MAX en MIN zijn respectievelijk maximum en minimum van deze drie waarden (R, G, B)
  • De drie waarden in H, S, V zijn dan als volgt te bepalen:


H = \left\{
\begin{matrix}
\left( 0 + \frac {G - B} {MAX - MIN} \right) \times 60, &
\mbox{ als } R = MAX \\
\left( 2 + \frac {B - R} {MAX - MIN} \right) \times 60, &
\mbox{ als } G = MAX \\
\left( 4 + \frac {R - G} {MAX - MIN} \right) \times 60, &
\mbox{ als } B = MAX
\end{matrix}\right.


L = \frac {MAX + MIN} {2} \
S = \frac {MAX - MIN} {MAX + MIN} \  \mbox{ als } L < \tfrac12
S = \frac {MAX - MIN} {2 - (MAX + MIN)} \   \mbox{ als } L \ge \tfrac12

De resulterende waarden zijn H (∈ [0, 360]; of vaker rond = modulo 360), S en V (ieder ∈ [0, 1]).

Bijzondere uitkomsten: (Vooraf, voor correcte doorloop functies.)

Als MAX = MIN, dan geldt S = 0. Dit is een grijskleur, waarin geen tint (H) zichtbaar is. Dit kan dan elke tint zijn zonder effect.
Als MAX = 0 dan geldt V = 0. Dit is zwart, en zowel tint als verzadiging hebben geen effect. 'Er is maar één kleur zwart'.


Omzetting van HSL naar RGB[bewerken]

De omzetting in deze richting verloopt als volgt:

  • Een HSV-kleur heeft de waarden H ∈ [0, 360], S ∈ [0, 1] en V ∈ [0, 1].
  • De RGB-waarden R, G en B zijn dan als volgt te bepalen:
H_i = \left \lfloor \tfrac{H}{60} \right \rfloor
f = \left(\tfrac{H}{60} - H_i\right) \times 2 - 1


span = \left\{
\begin{matrix}
 S \times      L,  & \mbox{ als } L  <  \tfrac12 \\
 S \times (1 - L), & \mbox{ als } L \ge \tfrac12 \\
\end{matrix}\right.


\begin{array}{rl}
p &= L + span \\
q &= L + f \times span \\
t &= L - span \\
u &= L - f \times span \\
\end{array}
En gebruik dan de volgende tabel voor toekenning van RGB-waarden:
Hi R G B
0 p q t
1 u p t
2 t p q
3 t u p
4 q t p
5 p t u

R, G en B zijn ∈ [0, 1]. Dit kan eenvoudig worden omgezet naar 24-bits RGB door elke waarde te vermenigvuldigen met 255.

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; 1/2) (0°; 1; 1)                   
(0,5; 1; 1/2) (127; 255; 127) (120°; 1/2; 3/4) (120°; 1/2; 1)                   
(0; 0; 1/2) (0; 0; 127) (240°; 1/2; 1/4) (240°; 1; 1/2)    

Zie ook[bewerken]

Externe links[bewerken]