Wat is OKLCH en waarom zou ik het gebruiken in plaats van HEX of HSL?

OKLCH (Helderheid, Chroma, Tint) is een perceptueel uniforme kleurruimte gebaseerd op het Oklab-model. In tegenstelling tot HEX of HSL produceren gelijke numerieke veranderingen in OKLCH gelijke waargenomen verschillen. Dit maakt het ideaal voor het ontwerpen van toegankelijke kleurenpaletten, het creëren van vloeiende gradiënten en het genereren van consistente Tailwind v4-kleurschalen, waarbij perceptuele voorspelbaarheid centraal staat.

Hoe converteer ik HEX naar OKLCH?

Plak je HEX-waarde (bijv. #3b82f6) in het HEX-invoerveld en het OKLCH-veld wordt onmiddellijk bijgewerkt met de equivalente notatie oklch(0.6 0.18 250). Alle andere formaten — OKLab, RGB en HSL — synchroniseren ook tegelijkertijd, zodat je de waarden in alle kleurruimten in één oogopslag kunt vergelijken.

Wat betekent 'buiten het sRGB-gamut' en wat gebeurt er met de kleur?

Sommige OKLCH-kleuren — met name waarden met hoge chroma — overschrijden de sRGB-kleurruimte die de meeste beeldschermen gebruiken. Wanneer dit gebeurt, past de tool het CSS Color 4 toGamut-algoritme toe om de dichtstbijzijnde weergavbare sRGB-kleur te vinden. Een amberkleurige waarschuwingsbanner verschijnt met de originele waarde buiten het gamut naast het gemapte resultaat, voor volledige transparantie.

Hoe werkt de Tailwind v4 OKLCH-paletgenerator?

De generator gebruikt het officiële helderheidsschema van Tailwind v4 (50=0.971, 100=0.945, tot 950=0.238) toegepast op je huidige tint en chroma. Het produceert 11 kleurstappen van licht naar donker en exporteert ze als een @theme { --color-brand-50: oklch(...); } codeblok dat direct in je CSS geplakt kan worden zonder verdere aanpassingen.

Waarom ziet OKLCH-interpolatie er beter uit dan HSL voor gradiënten?

HSL interpoleert via een cilindrisch coördinatenstelsel dat niet overeenkomt met menselijke waarneming, wat vaak grijze dips of onverwachte toonverschuivingen halverwege een gradiënt veroorzaakt. OKLCH interpoleert in de perceptueel uniforme Oklab-ruimte, waardoor helderheid en chroma soepel overgaan zonder onverwachte kleureffecten, wat resulteert in meer natuurlijk uitziende en visueel prettige gradiënten.

Is deze OKLCH-converter gratis en privé?

Ja. De tool is volledig gratis en draait volledig in je browser met de culori-bibliotheek. Er worden geen kleurwaarden naar een server geüpload, zodat je het veilig kunt gebruiken voor vertrouwelijke of gevoelige projecten.

Werkt CSS Color 4 OKLCH in alle browsers?

De OKLCH-kleursyntaxis (oklch()) wordt ondersteund in alle moderne browsers vanaf 2023, waaronder Chrome 111+, Firefox 113+, Safari 15.4+ en Edge 111+. Voor oudere browsers gebruik je de HEX- of RGB-fallbackwaarden die deze converter biedt, wat volledige compatibiliteit met oudere omgevingen garandeert.

Kleurtools

OKLCH Kleurconverter – CSS Color 4, Tailwind v4 Paletgenerator

Gratis OKLCH-kleurconverter met live synchronisatie tussen OKLCH, OKLab, RGB, HSL en HEX. Inclusief L/C/H/alfa-schuifregelaars, CSS Color 4 gamut-mapping en Tailwind v4 paletexport.

OKLCH (Helderheid, Chroma, Tint) is een perceptueel uniforme kleurruimte gebouwd op het Oklab-model en officieel geadopteerd in CSS Color Level 4. In tegenstelling tot RGB of HSL houdt OKLCH de waargenomen helderheid consistent over de tonen, waardoor het ideaal is voor toegankelijke kleurensystemen, Tailwind v4-paletten en vloeiende gradiënten.

Hoe de OKLCH Kleurconverter te Gebruiken

1
Voer een kleurwaarde in
Typ of plak een waarde in een ondersteund formaat: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) of oklab(0.6 -0.056 -0.169). De tool synchroniseert alle andere formaten onmiddellijk.
2
Verfijn met de L/C/H/Alfa-schuifregelaars
Sleep de schuifregelaars voor Helderheid (L), Chroma (C), Tint (H) of Alfa. De Chroma-schuifregelaar toont de sRGB-gamutgrensmarkering zodat je altijd weet wanneer een kleur het standaard weergavebereik overschrijdt.
3
Controleer de gamut-waarschuwing indien deze verschijnt
Als je OKLCH-kleur buiten het sRGB-gamut valt, verschijnt een amberkleurige waarschuwingsbanner met de oorspronkelijke waarde en het CSS Color 4 toGamut-gemapte resultaat dat voor weergave wordt gebruikt.
4
Genereer een Tailwind v4-palet
De Tailwind v4 OKLCH-paletsectie genereert automatisch kleurstappen van 50 tot 950 voor je huidige tint, volgens het officiële Tailwind-helderheidsschema. Klik op Kopiëren om het @theme-blok direct in je CSS te plakken.

Referenties

W3C CSS Color Level 4 – oklch()
De W3C-specificatie die de OKLCH-kleurnotatie en gamut-mappingalgoritmen definieert.
Culori – JavaScript Kleurbibliotheek
De open-source bibliotheek die OKLCH-conversie, toGamut-mapping en perceptuele interpolatie in deze tool aandrijft.
Evil Martians – OKLCH in CSS: Why Quit RGB and HSL?
Een uitgebreide gids die de voordelen van OKLCH ten opzichte van RGB en HSL voor modern kleurwerk uitlegt.
Tailwind CSS v4 – Standaard Palet
Tailwinds officiële kleurpaletdocumentatie, inclusief de OKLCH-helderheidswaarden die in deze paletgenerator worden gebruikt.

Gerelateerde Tools

Kleurconverter

Converteer bidirectioneel live tussen RGB, RGBA, HEX, HSL, HSV en CMYK.

CSS Minifier

Minificeer CSS die je OKLCH-kleurwaarden gebruikt.

SVG-viewer

Bekijk en inspecteer SVG-afbeeldingen die OKLCH-vul- en lijnwaarden gebruiken.

Veelgestelde Vragen

Wat is OKLCH en waarom zou ik het gebruiken in plaats van HEX of HSL?: OKLCH (Helderheid, Chroma, Tint) is een perceptueel uniforme kleurruimte gebaseerd op het Oklab-model. In tegenstelling tot HEX of HSL produceren gelijke numerieke veranderingen in OKLCH gelijke waargenomen verschillen. Dit maakt het ideaal voor het ontwerpen van toegankelijke kleurenpaletten, het creëren van vloeiende gradiënten en het genereren van consistente Tailwind v4-kleurschalen, waarbij perceptuele voorspelbaarheid centraal staat.
Hoe converteer ik HEX naar OKLCH?: Plak je HEX-waarde (bijv. #3b82f6) in het HEX-invoerveld en het OKLCH-veld wordt onmiddellijk bijgewerkt met de equivalente notatie oklch(0.6 0.18 250). Alle andere formaten — OKLab, RGB en HSL — synchroniseren ook tegelijkertijd, zodat je de waarden in alle kleurruimten in één oogopslag kunt vergelijken.
Wat betekent 'buiten het sRGB-gamut' en wat gebeurt er met de kleur?: Sommige OKLCH-kleuren — met name waarden met hoge chroma — overschrijden de sRGB-kleurruimte die de meeste beeldschermen gebruiken. Wanneer dit gebeurt, past de tool het CSS Color 4 toGamut-algoritme toe om de dichtstbijzijnde weergavbare sRGB-kleur te vinden. Een amberkleurige waarschuwingsbanner verschijnt met de originele waarde buiten het gamut naast het gemapte resultaat, voor volledige transparantie.
Hoe werkt de Tailwind v4 OKLCH-paletgenerator?: De generator gebruikt het officiële helderheidsschema van Tailwind v4 (50=0.971, 100=0.945, tot 950=0.238) toegepast op je huidige tint en chroma. Het produceert 11 kleurstappen van licht naar donker en exporteert ze als een @theme { --color-brand-50: oklch(...); } codeblok dat direct in je CSS geplakt kan worden zonder verdere aanpassingen.
Waarom ziet OKLCH-interpolatie er beter uit dan HSL voor gradiënten?: HSL interpoleert via een cilindrisch coördinatenstelsel dat niet overeenkomt met menselijke waarneming, wat vaak grijze dips of onverwachte toonverschuivingen halverwege een gradiënt veroorzaakt. OKLCH interpoleert in de perceptueel uniforme Oklab-ruimte, waardoor helderheid en chroma soepel overgaan zonder onverwachte kleureffecten, wat resulteert in meer natuurlijk uitziende en visueel prettige gradiënten.
Is deze OKLCH-converter gratis en privé?: Ja. De tool is volledig gratis en draait volledig in je browser met de culori-bibliotheek. Er worden geen kleurwaarden naar een server geüpload, zodat je het veilig kunt gebruiken voor vertrouwelijke of gevoelige projecten.
Werkt CSS Color 4 OKLCH in alle browsers?: De OKLCH-kleursyntaxis (oklch()) wordt ondersteund in alle moderne browsers vanaf 2023, waaronder Chrome 111+, Firefox 113+, Safari 15.4+ en Edge 111+. Voor oudere browsers gebruik je de HEX- of RGB-fallbackwaarden die deze converter biedt, wat volledige compatibiliteit met oudere omgevingen garandeert.