RGB is niet genoeg: HSL, CMYK en OKLCH – kleurnotaties uitgelegd

In het vorige artikel, Hoe computers kleuren maken: RGB, HEX en binaire getallen, zagen we dat een kleur gewoon drie getallen is — rood, groen, blauw, elk 0–255. Schermen werken daar prima mee. Maar zodra een mens met kleur gaat werken, schiet RGB al snel tekort.

RGB is handig, maar niet intuïtief

“Iets helderder rood.” Hoe doe je dat in RGB? Je moet alle drie de kanalen tegelijk een beetje ophogen. “Alleen de verzadiging iets verlagen” — puur op basis van RGB weet je niet welk kanaal je daarvoor moet aanpassen. “Druk dit precies zo af op papier” — met RGB is dat helemaal niet mogelijk.

Andere kleurnotaties zijn ontstaan om precies deze problemen op te lossen.

HSL — de manier waarop mensen denken

HSL beschrijft een kleur aan de hand van tint · verzadiging · helderheid. hsl(14, 100%, 60%) is dezelfde kleur als #FF5733, maar nu is onmiddellijk duidelijk wat elke component betekent.

Als RGB de taal van de computer is, is HSL de taal van de designer. Je kunt dezelfde kleur benaderen vanuit wat je wilt veranderen.

Hue — tint is een cirkel van 360°

Tinten lopen als een klok één rondje. Van 0° tot 360°. 0° en 360° zijn allebei rood.

Saturation — verzadiging bepaalt hoe levendig een kleur is

Dezelfde tint met minder verzadiging beweegt richting grijs.

Lightness — helderheid loopt van zwart naar wit

L op 0% is altijd zwart, L op 100% altijd wit. L op 50% is de “echte” helderheid van die kleur.

Het echte nut van HSL — paletten bouwen

Houd dezelfde tint (Hue) vast en verander alleen L, dan krijg je een reeks kleuren die van nature bij elkaar passen. Hetzelfde doen in RGB betekent negen vakjes handmatig berekenen; in HSL verander je L stapsgewijs van 12% naar 92% en klaar.

Beide paletten hierboven genereer je met één blokje CSS.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... verander alleen L met stappen van 10 */
}

Dit is waar HSL pas echt zijn waarde bewijst bij het opbouwen van een design system.

CMYK — de taal van inkt

Om kleur op papier te zetten in plaats van op een scherm, heb je een heel ander systeem nodig. CMYK zijn de vier inktverhoudingen die drukkerijen gebruiken.

Waarom heet zwart “K” en niet “B”? Om verwarring met Blue te vermijden. De letter komt ook van de drukterm “key plate” — de plaat waarop de andere inkten worden uitgelijnd.

Licht wordt helderder door optellen; inkt wordt donkerder

Het grootste verschil tussen RGB en CMYK is de mengmethode.

Rode inkt ziet er rood uit omdat het al het andere licht absorbeert en alleen rood terugkaatst. Inkt werkt door licht weg te nemen. Hoe meer inkt je mengt, hoe donkerder het resultaat. In theorie geeft CMY samen zwart, maar in de praktijk ontstaat een modderig bruin. Daarom is er een aparte zwarte inkt (K).

Waar gebruik je CMYK?

Als je voor schermen ontwerpt, kom je CMYK nauwelijks tegen. Het duikt alleen op bij drukwerk.

• Bestanden aanleveren bij de drukker — visitekaartjes, posters, boeken, verpakkingen. Drukkerijen converteren RGB-bestanden zelf naar CMYK.
• Drukwerk in Photoshop / Illustrator — stel de kleurenmodus meteen in op CMYK wanneer je voor print werkt.
• Merkrichtlijnen — zowel de HEX-waarde voor schermen als de CMYK-waarde voor print worden naast elkaar vermeld, zodat de merkkleur in beide media herkenbaar blijft.

Waarom schermkleuren en printkleuren van elkaar afwijken — Gamut

Het kleurenbereik van een scherm (RGB gamut) en dat van inkt (CMYK gamut) zijn niet gelijk. Een schreeuwerig fluoriserend roze op het scherm komt niet uit de drukker — die kleur valt buiten wat inkt kan reproduceren.

Daarom kiezen printontwerpers vooraf alleen kleuren die binnen het CMYK-bereik vallen. Een RGB-ontwerp direct afdrukken levert regelmatig doffe, levenloze kleuren op.

CMYK-waarden noteren

Je geeft aan hoeveel procent van elk inkttype wordt aangebracht. 0% betekent geen inkt, 100% is volledig.

Alleen K op 100% levert een grijsachtig, dof zwart op. Drukkerijen leggen daarom ook CMY als onderlaag aan voor een dieper zwart.

OKLCH — de coördinaten van de mens

Dit kleurmodel doorbrak begin jaren twintig echt door. De kerngedachte: “natuurlijk voor het menselijk oog.”

De drie coördinaten lijken op HSL.

• L — Lightness (helderheid, 0–1)
• C — Chroma (verzadiging, 0–±0,4)
• H — Hue (tint, 0–360°)

Maar HSL heeft een verborgen probleem. Bij dezelfde waarde L = 50% varieert de waargenomen helderheid sterk per kleur. Vergelijk ze direct.

Kortom: RGB en HSL zijn machinale coördinaten. OKLCH zijn menselijke coördinaten.

L · C · H, elk afzonderlijk

Wat er gebeurt als je slechts één coördinaat aanpast terwijl de andere twee vaststaan.

Toepassingen

• Uniform heldere paletten — acht categorieklassen op exact dezelfde helderheid afstemmen
• Automatische dark/light-mode — draai alleen L om voor een natuurlijk donker thema
• Toegankelijkheid — het helderheidsverschil tussen tekst en achtergrond precies voorspellen
• Gradiënten — vloeiende overgangen zonder een grijs bandje in het midden

OKLCH is officieel opgenomen in CSS Color Level 4 en werkt out-of-the-box in moderne browsers.

.btn { background: oklch(67% 0.18 30); }       /* oranje */
.btn:hover { background: oklch(60% 0.18 30); } /* alleen L 7 omlaag → precies dat donkerder */

Wat gebruik je wanneer?

Voor de meeste digitale projecten is RGB/HEX voldoende. HSL is handig bij het opbouwen van paletten en OKLCH helpt enorm bij dark/light-mode design.

Kleuren beheren met fns

Nu je weet dat kleur gewoon een getal is, is de volgende stap je favoriete kleuren altijd bij de hand hebben. fns bundelt het ophalen, opslaan en hergebruiken van kleuren achter één toets.

Overal op het scherm een kleur oppikken met Eyedropper — ⌘+Shift+K

Eyedropper pakt precies de kleur van welke pixel dan ook op het scherm. Het is alsof je de kleurenkiezer van Figma of Photoshop systeembreed beschikbaar maakt.

Druk op ⌘+Shift+K en de Eyedropper van fns verschijnt, waar je ook bent. Eén pixel in een ontwerpbestand, een specifiek gebied in een foto, de achtergrondkleur van een andere app — beweeg de cursor erheen en klik, en je pikt die kleur exact op.

• Bij elke klik wordt de kleur automatisch naar het klembord gekopieerd. Je hoeft niets extra te doen.
• Via de Eyedropper-widget kies je in welk formaat de kleur op het klembord komt: RGB, HEX, HSL, CMYK of OKLCH.
• Je ziet een visuele preview van de opgepakte kleur en de dichtstbijzijnde systeemkleuren.

Eyedropper → automatisch naar klembord → terughalen via de klembordkiezer — de workflow loopt door zonder onderbreking. Geen apart venster zoals bij de ingebouwde Digital Color Meter van macOS, en je hoeft niet elke keer handmatig te kopiëren.

Het klembord herkent kleurcodes automatisch

De klembordgeschiedenis van fns detecteert automatisch of gekopieerde tekst een kleurcode is, ongeacht het formaat.

Als je een gekopieerde kleur terughaalt uit de geschiedenis, is het moeilijk te herinneren welke kleur er achter een tekstreeks schuilging. fns toont een klein kleurvakje naast elk item, zodat je in één oogopslag ziet welke kleur het is.

Alleen kleuren bekijken

Met één toets filter je de klembordgeschiedenis om alleen kleurcodes te tonen. Tijdens designwerk wil je soms alleen de recent gebruikte kleuren zien zonder door teksten, URL’s en codefragmenten te hoeven bladeren.

• Typ een filterwoord als color: in dezelfde kiezer → alleen kleuritems verschijnen
• Zoek op kleurnaam — zoek op “blue” of “red” en je ziet alleen die tinten
• Vergelijkbare kleuren worden visueel gegroepeerd weergegeven

Eén kleur in een ander formaat

Je kunt een kleur omzetten naar een andere notatie en direct plakken. Heb je #FF5733 gekopieerd uit Figma en wil je het als rgb(...) in CSS plakken? Selecteer het item in de fns-klembordkiezer en één sneltoets converteert het automatisch.

Geen aparte converter meer nodig als je schakelt tussen Figma (HSB) en CSS (HSL/HEX/OKLCH).

Tekstuitbreiding en kleurafkortingen

Registreer veelgebruikte merkkleuren als tekstafkorting.

Dezelfde afkortingen werken overal: in CSS, in het kleurinvoerveld van Figma, in een Slack-bericht, in een code-editor. Nooit meer de merkrichtlijnen opzoeken om een kleurcode te kopiëren.

Probeer fns eens als je wilt stoppen met telkens een converter te openen en kleurcodes handmatig om te zetten.

Benieuwd waar deze getallen vandaan komen — de basis van de drie RGB-kanalen, binaire getallen en HEX-notatie? Begin met Hoe computers kleuren maken: RGB, HEX en binaire getallen.