Kort samengevat
- Tint is de positie van een kleur op de kleurencirkel, een hoek van 0° tot 360°: rood op 0°, groen rond 120°, blauw rond 240° en terug naar rood.
- Verzadiging is hoeveel van die tint aanwezig is, van 0 procent, grijs, tot 100 procent, de zuivere kleur. Helderheid geeft aan hoe licht de kleur is, van 0 procent, zwart, tot 100 procent.
- Omdat tint een cirkel vormt, kunnen twee tinten maximaal 180° uit elkaar liggen: tegenover elkaar op de cirkel. Een grotere afwijking is langs de andere kant juist kleiner.
- HSB is bedoeld om kleuren op het oog te kiezen en beschrijven. RGB beschrijft hoe schermen ze maken. Lab meet hoe verschillend twee kleuren eruitzien. Ze beantwoorden andere vragen.
- Een kleur namaken met drie aparte schuifregelaars laat zien welke van de drie inschattingen afweek. Kiezen uit kleurstalen kan dat niet.
Drie getallen, drie vragen
Neem een kleur, bijvoorbeeld gedempt blauwgroen. Als je die beschrijft, denk je niet aan de hoeveelheid rood, groen en blauw licht, hoewel het scherm dat wel zo maakt. Je zegt: blauwgroen, niet erg fel, wat donker. Dat is HSB: tint, verzadiging en helderheid, in de volgorde waarin mensen denken. Alvy Ray Smith stelde het model eind jaren zeventig voor, juist om mensen kleuren te laten kiezen op een manier die bij hun waarneming past. Het heet ook HSV, met V voor value. Het gaat om hetzelfde model.
| Dimensie | De vraag die het beantwoordt | Bereik | De uiteinden |
|---|---|---|---|
| Tint | Welke kleur is het? | 0°–360° | Rood op 0°, via geel, groen, cyaan, blauw en magenta terug naar rood |
| Verzadiging | Hoeveel van die kleur zit erin? | 0–100% | 0% is grijs zonder enige tint; 100% is de zuiverste versie van de tint |
| Helderheid | Hoe licht is de kleur? | 0–100% | 0% is zwart, ongeacht de andere twee waarden; 100% is zo licht als de tint kan zijn |
Tint is een hoek, en dat doet ertoe
Tint staat op een cirkel omdat het spectrum, dat in een lijn van rood naar violet loopt, wordt gesloten door de purpertinten die niet in een regenboog voorkomen. Magenta ligt tussen violet en rood en sluit de lus. Daarom meten we tint als hoek. Rood is 0°, geel ongeveer 60°, groen 120°, cyaan 180°, blauw 240°, magenta 300° en op 360° zijn we weer bij rood.
Een cirkel heeft een eigenschap die een lijn niet heeft: er is een maximale afstand, halverwege de omtrek. Twee tinten liggen nooit meer dan 180° uit elkaar. Een schatting van 350° voor een doel van 10° wijkt niet 340° af, maar 20°, over de bovenkant van de cirkel. Een eerlijke tintscore meet altijd de kortste weg. De grootst mogelijke tintafwijking is de complementaire kleur, precies aan de andere kant. Daarom normaliseert Percore tintafwijkingen over 180°: het bereik van perfect tot zo ver mogelijk ernaast.
Verzadiging en helderheid
Verzadiging is de hoeveelheid tint in een kleur. Bij nul verzadiging vallen alle tinten samen in hetzelfde grijs. Daarom is het echt moeilijk om de tint van een heel bleke of vergrijsde kleur te benoemen: er zit nauwelijks zichtbare tint in. Bij volledige verzadiging is de kleur zo levendig als die tint toelaat. Helderheid is eenvoudigweg hoe licht een kleur is. Bij nul helderheid is alles zwart, wat de tint en verzadiging ook zijn.
De wisselwerking tussen beide maakt het lastig. Donker, verzadigd rood en licht, onverzadigd rood kunnen als compleet verschillende kleuren voelen, hoewel ze dezelfde tint hebben. In de praktijk onthouden mensen de tint vaak ongeveer goed en overschatten ze de verzadiging: de herinnerde kleur is levendiger dan het origineel. Helderheidsafwijkingen gaan beide kanten op, afhankelijk van het omgevingslicht. Zoek naar zulke patronen in een score per dimensie.
HSB naast de andere modellen
HSB is één van de manieren om dezelfde kleur te beschrijven. Elk model bestaat om een reden. Het verkeerde model kiezen is een veelvoorkomende bron van verwarring. Dit is waar elk voor dient.
| Model | Wat het is | Geschikt voor |
|---|---|---|
| HSB / HSV | Tint als hoek, verzadiging en helderheid als percentages. Bij 100% helderheid is de tint op zijn zuiverst en lichtst. | Kleuren op het oog kiezen en beschrijven, kleurkiezers en het begrijpen van een kleurgeheugenfout |
| HSL | Dezelfde tint, maar lightness in plaats van brightness. Bij 100% lightness is het altijd wit; bij 50% staat de zuivere tint. | CSS en webontwerp, waar een kleur richting wit lichter maken veel voorkomt |
| RGB | Hoeveel rood, groen en blauw licht, elk van 0–255. Dit is wat een scherm fysiek doet. | Code, bestandsformaten en alles wat een apparaat moet tonen; moeilijk op het oog te doorgronden |
| CIELAB (Lab) | Lichtheid plus twee tegengestelde assen, groen–rood en blauw–geel. Zo gebouwd dat gelijke afstanden even verschillend lijken. | Kleurverschillen meten met Delta E, drukwerk en kleurbeheer |
Een handige indeling: RGB is voor de machine, HSB en HSL voor de mens en Lab voor de meting. Kleurwaarnemingstests die met Delta E scoren meten in Lab. Tests met drie schuifregelaars laten je antwoorden in HSB. Beide zijn bruikbaar en vertellen je iets anders.
Waarom drie schuifregelaars meer vertellen dan een kleurstaal
Stel dat je een kleur ziet, die verdwijnt en je de dichtstbijzijnde van zes kleurstalen kiest. Het resultaat is één stukje informatie: goed of fout, met een afstand. Maak je de kleur zelf na met drie aparte regelaars, dan krijg je drie getallen: je afwijking in tint, verzadiging en helderheid. Die drie samen verklaren de fout. Wie elke dag weinig afwijkt in tint maar veel in verzadiging, heeft iets geleerd over zijn waarneming en kan daarvoor corrigeren.
Dit is het idee achter de kleursessie van Percore. Een kleur vult het scherm, verdwijnt en wordt met tint-, verzadigings- en helderheidsregelaars nagemaakt. Elke afwijking wordt genormaliseerd: tint over 180°, de andere twee over hun volledige bereik. Het gemiddelde wordt een nauwkeurigheid van 0 tot 100. De uitsplitsing staat ernaast. De volledige formule staat in Zo berekent Percore de scores. Zo verbeter je je kleurwaarneming laat zien hoe je met die uitsplitsing oefent.
Maak een kleur na met de drie schuifregelaars.
Download in de App StoreVeelgestelde vragen
Zijn HSB en HSV hetzelfde?
Ja. V staat voor value, B voor brightness. Ze verwijzen naar hetzelfde model. De naam verschilt per programma: Apple en Adobe gebruiken HSB, veel andere programma's HSV.
Wat is het verschil tussen HSB en HSL?
Ze delen dezelfde tint. In HSB is de kleur bij 100 procent brightness op zijn zuiverst en lichtst. In HSL is 100 procent lightness wit en staat de zuivere tint op 50 procent. HSL wordt veel gebruikt in CSS, HSB in ontwerpprogramma's.
Waarom staat rood op 0° in de kleurencirkel?
Dat is een afspraak. De cirkel moet ergens beginnen en bij het vastleggen van het model is rood gekozen. De volgorde rood, geel, groen, cyaan, blauw en magenta volgt het spectrum. Magenta sluit de lus.
Wat is de grootst mogelijke tintafwijking?
180°, de tint precies tegenover het doel op de cirkel: de complementaire kleur. Een schijnbaar grotere afwijking is langs de andere kant juist kleiner. Meet tintafwijkingen daarom altijd langs de kortste weg.
Welke van de drie schatten mensen het vaakst verkeerd in?
In de praktijk verzadiging: mensen herinneren een kleur vaak levendiger dan hij was. De tint zit meestal in de buurt. Helderheid hangt sterk af van het omgevingslicht. Een score per dimensie toont jouw eigen patroon.