🎨
← Terug naar handleidingen

Moderne CSS-kleurfuncties: rgba(), hsl(), oklch() en meer

· Tags: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Moderne CSS-kleurfuncties: rgba(), hsl(), oklch() en meer

CSS-kleurfuncties zijn enorm geëvolueerd. Wat ooit een keuze was tussen hex, rgb() en hsl(), is nu een rijk ecosysteem van kleurruimten en bewerkingsfuncties die ontwikkelaars ongekende controle geven over kleurweergave, interpolatie en toegankelijkheid.

Deze gids behandelt elke belangrijke CSS-kleurfunctie die in 2026 beschikbaar is, van het vertrouwde tot het allernieuwste.

RGB en RGBA: de werkpaarden

De functie rgb() definieert kleuren met behulp van het additieve kleurmodel rood-groen-blauw. Het maakt sinds CSS1 deel uit van CSS en wordt ondersteund in elke browser die ooit is gemaakt.

/* Verouderde syntaxis met komma's */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Moderne syntaxis met spaties (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Percentagewaarden */
color: rgb(100% 0% 0%);

Belangrijke wijzigingen in moderne RGB

CSS Color Level 4 introduceerde twee belangrijke verbeteringen:

  1. Gescheiden door spaties in plaats van komma's — De functie rgb() accepteert nu waarden die zijn gescheiden door spaties of schuine strepen
  2. Uniforme alfasyntaxis — Het rgba()-alias is verouderd (maar wordt nog steeds ondersteund). rgb() accepteert nu native een alfakanaal

Deze moderne syntaxis wordt ondersteund in alle browsers die sinds 2020 zijn uitgebracht. Gebruik voor nieuwe projecten de moderne syntaxis en sla het rgba()-alias volledig over.

RGB-kanalen

Elk RGB-kanaal accepteert:

  • Een geheel getal van 0 tot 255
  • Een percentage van 0% tot 100%
  • Het trefwoord none voor ontbrekende kanalen (CSS Color Level 4)

Het trefwoord none is nuttig bij het interpoleren van kleuren — het vertelt de browser dat specifieke kanaal niet te interpoleren.

HSL en HSLA: intuïtieve kleurbesturing

HSL staat voor Hue (tint), Saturation (verzadiging), Lightness (lichtheid). Het gebruikt een cilindrisch coördinatensysteem dat van nature aansluit bij hoe mensen over kleur denken.

/* H is de tinthoek (0-360), S is verzadiging (0-100%), L is lichtheid (0-100%) */
color: hsl(0 100% 50%);        /* Zuiver rood */
color: hsl(0 100% 50% / 0.5);  /* Rood met 50% opaciteit */

/* Tinthoeken met eenheden */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Referentie tinthoeken

| Tint | Kleur | Hex | |-----|---------|----------| | 0 | Rood | #FF0000 | | 30 | Oranje | #FF8000 | | 60 | Geel | #FFFF00 | | 120 | Groen | #00FF00 | | 180 | Cyaan | #00FFFF | | 240 | Blauw | #0000FF | | 300 | Magenta | #FF00FF |

HSL is de beste keuze voor het programmatisch genereren van kleurenpaletten, omdat het wijzigen van alleen het lichtheids- of verzadigingskanaal consistente visuele varianten creëert.

HWB: mengen met wit en zwart

HWB (Hue, Whiteness, Blackness) is een intuïtiever alternatief voor HSL. U kiest een tint en voegt vervolgens witheid en zwartheid toe om tinten en schaduwen te creëren.

color: hwb(0 0% 0%);    /* Zuiver rood */
color: hwb(0 40% 0%);   /* Getint rood (wit toegevoegd) */
color: hwb(0 0% 40%);   /* Geschaduwd rood (zwart toegevoegd) */
color: hwb(0 20% 20%);  /* Toon (wit + zwart) */

HWB is eenvoudiger dan HSL voor één specifiek gebruik: het creëren van tint- en schaduwvarianten van een merkkleur. U hoeft nooit na te denken over verzadigingscurven — voeg gewoon wit of zwart toe.

Browserondersteuning: HWB wordt ondersteund in alle moderne browsers (Chrome 101+, Firefox 96+, Safari 15+).

LAB en LCH: perceptueel uniforme ruimten

LAB (Lightness, A-as, B-as) en LCH (Lightness, Chroma, Hue) zijn perceptueel uniforme kleurruimten. Dit betekent dat de Euclidische afstand tussen twee kleurwaarden overeenkomt met het waargenomen visuele verschil — iets wat RGB en HSL niet kunnen.

color: lab(50% 50 0);        /* Medium rood */
color: lch(50% 50 0);        /* Zelfde kleur in cilindrische vorm */

Waarom perceptuele uniformiteit ertoe doet:

  • Verlopen — Interpoleren in LAB of LCH produceert vloeiende, natuurlijke overgangen zonder de doffe "modderige zone" die RGB-verlopen creëren
  • Kleurverschilmeting — Delta E (de maat voor perceptueel verschil) is betekenisvol in de LAB-ruimte
  • Toegankelijkheid — Perceptuele uniformiteit helpt voorspellen hoe kleuren worden waargenomen door gebruikers met kleurenziendeficiënties

Beperkingen: LAB en LCH kunnen kleuren produceren buiten de sRGB-kleurruimte. Deze kleuren worden afgekapt wanneer ze op sRGB-schermen worden weergegeven, maar zijn toegankelijk op displays met een bredere kleurruimte (DCI-P3, Rec. 2020).

Browserondersteuning: Ondersteund in Chrome 111+, Firefox 113+, Safari 15+. Geen IE of verouderde Edge-ondersteuning.

OKLAB en OKLCH: de moderne perceptuele standaard

OKLCH is een verbeterde versie van LCH, ontwikkeld door Bjorn Ottosson. Het corrigeert perceptuele niet-uniformiteiten in LCH, vooral voor blauwtinten. OKLCH is in 2025-2026 de aanbevolen standaardkleurruimte geworden voor nieuwe CSS-projecten.

color: oklch(60% 0.2 30);
/* Lightness: 0-100%, Chroma: 0-~0.4, Hue: 0-360 */

Waarom OKLCH de beste kleurruimte voor CSS is

  1. Beste perceptuele uniformiteit — Gelijke numerieke wijzigingen produceren gelijke visuele wijzigingen over alle tinten
  2. Voorspelbare lichtheid — Kleuren met dezelfde lichtheidswaarde zien er echt even helder uit
  3. Geen modderige verlopen — Interpolatie blijft schoon over het volledige tintbereik
  4. Standaard sRGB-veilig — De meeste OKLCH-waarden produceren kleuren binnen de sRGB-kleurruimte
  5. Intuïtieve kanalen — Net als HSL, maar met echte perceptuele nauwkeurigheid

OKLCH in de praktijk

/* Een evenwichtige kleurenschaal creëren met OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Merk op dat elke stap ruwweg met dezelfde lichtheidswaarde verandert (20 procentpunten). Omdat OKLCH perceptueel uniform is, lijken deze stappen voor het menselijk oog gelijkmatig verdeeld — iets wat met HSL moeilijk te bereiken is.

Browserondersteuning: OKLCH wordt ondersteund in Chrome 111+, Firefox 113+, Safari 15.4+. Het is snel de meest aanbevolen moderne kleurruimte geworden.

Color-Mix: kleuren mengen in CSS

De functie color-mix() mengt twee kleuren in een gespecificeerde kleurruimte:

/* Rood en blauw gelijk mengen in sRGB */
color: color-mix(in srgb, red, blue);

/* 30% primair, 70% wit — een tint */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Mengen met een waargenomen kleurruimte voor vloeiende resultaten */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

Met de parameter in <color-space> bepaalt u de interpolatieruimte. Voor de meeste gevallen produceert in oklch de beste visuele resultaten.

Gebruiksgevallen:

  • Tinten en schaduwen creëren zonder preprocessorfuncties
  • Componentvarianten bouwen vanuit één kleurtoken
  • Hover- en actieve statussen dynamisch genereren
  • Verloopachtige effecten creëren in één functie

Relatieve kleursyntaxis: bestaande kleuren wijzigen

CSS Color Level 4 stelt u in staat om nieuwe kleuren af te leiden uit bestaande door individuele kanalen te wijzigen:

--primary: #3366cc;

/* OKLCH-kanalen gebruiken */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* HSL-kanalen gebruiken */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

Het trefwoord from <color> pakt de kanalen van de bronkleur uit in de kanalen van de doelfunctie, die u vervolgens kunt aanpassen met rekenkundige bewerkingen.

Kanaaltrefwoorden per kleurruimte

Elke kleurruimte stelt specifieke kanaaltrefwoorden beschikbaar:

| Kleurruimte | Trefwoorden | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Overzicht browserondersteuning (2026)

| Functie | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Alle | Alle | Alle | Alle | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Relatieve kleursyntaxis | 111+ | 113+ | 16.2+ | 111+ |

Alle moderne kleurfuncties zijn in 2026 veilig te gebruiken voor projecten die geen Internet Explorer-ondersteuning vereisen. Gebruik voor bredere compatibiliteit een buildstap die moderne syntaxis converteert naar hex of verouderde rgb().

Praktische aanbevelingen

  • Voor bestaande projecten — HSL blijft de beste balans tussen leesbaarheid en mogelijkheden
  • Voor nieuwe projecten — Gebruik OKLCH als uw primaire kleurruimte vanwege de perceptuele nauwkeurigheid
  • Voor verlopen — Interpoleer altijd in OKLCH om modderige overgangen te voorkomen
  • Voor designsystemen — Bewaar basiskleuren in OKLCH, genereer varianten met color-mix() of relatieve syntaxis
  • Voor canvas/WebGL — Blijf bij RGB, dat native is voor de weergavepipeline

Conclusie

Moderne CSS-kleurfuncties hebben veranderd wat u met kleur op het web kunt doen. OKLCH biedt perceptuele uniformiteit die het ontwerpen van kleursystemen voorspelbaar maakt. color-mix() en relatieve kleursyntaxis elimineren de noodzaak van preprocessor-kleurfuncties. Samen geven deze hulpmiddelen webontwikkelaars dezelfde kleurkracht die ontwerptools jarenlang hebben geboden — nu rechtstreeks in de browser.

Gebruik onze gratis online kleurenconverter om te converteren tussen alle moderne CSS-kleurformaten, waaronder OKLCH, LAB, HWB en klassieke HEX/RGB/HSL.