HSL (kleurruimte)

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

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

Voor deze omzetting geldt het volgende:

• De RGB-kleuren R, G, B hebben elk een waarde in het bereik [0, 1] (dus delen door 255).
• MAX en MIN zijn respectievelijk maximum en minimum van deze drie waarden (R, G, B).

• De drie waarden in H, S, L zijn dan als volgt te bepalen:

${\displaystyle 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.}$

${\displaystyle L={\frac {MAX+MIN}{2}}\ }$

${\displaystyle S={\frac {MAX-MIN}{MAX+MIN}}\ {\mbox{ als }}L<{\tfrac {1}{2}}}$

${\displaystyle S={\frac {MAX-MIN}{2-(MAX+MIN)}}\ {\mbox{ als }}L\geq {\tfrac {1}{2}}}$

De resulterende waarden zijn H (∈ [0, 360]; of vaker rond = modulo 360), S en L (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 L = 0. Dit is zwart, en zowel tint als verzadiging hebben geen effect. 'Er is maar één kleur zwart'.

Omzetting van HSL naar RGB

De omzetting in deze richting verloopt als volgt:

• Een HSL-kleur heeft de waarden H ∈ [0, 360], S ∈ [0, 1] en L ∈ [0, 1].
• De RGB-waarden R, G en B zijn dan als volgt te bepalen:

${\displaystyle H_{i}=\left\lfloor {\tfrac {H}{60}}\right\rfloor }$

${\displaystyle f=\left({\tfrac {H}{60}}-H_{i}\right)\times 2-1}$

${\displaystyle span=\left\{{\begin{matrix}S\times L,&{\mbox{ als }}L<{\tfrac {1}{2}}\\S\times (1-L),&{\mbox{ als }}L\geq {\tfrac {1}{2}}\\\end{matrix}}\right.}$

${\displaystyle {\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

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.

• Computertoepassingen die HSL gebruiken:
  • Inkscape (vanaf versie 0.42)
  • Paint Shop Pro
  • Windows kleurkiezer systeemkleuren
  • De CSS3 specificatie

• Computertoepassingen die HSV/HSB gebruiken zijn:
  • Adobe graphic applications (Illustrator, Photoshop en andere)
  • GIMP
  • Apple Mac OS X kleurkiezer systeemkleuren
  • Xara Xtreme

Voorbeelden

RGB (×100%)	RGB (dec)	HSL	HSV/HSB	Resultaat
(1; 0; 0)	(255; 0; 0)	(0°; 1; 1/2)	(0°; 1; 1)
(1/2; 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

• Kleurenkiezer

Externe links

• https://www.w3.org/TR/css3-color/#hsl-color Uitleg van HSL en verschil met RGB
• https://software.intel.com/en-us/node/503877 voor kleurconversies
• https://web.archive.org/web/20071029230340/http://www.easyrgb.com/math.php?MATH=M19#text19 EasyRGB.com Geeft formules om kleuren te converteren van en naar RGB