Hex naar OKLCH converter

Wat is een hex naar OKLCH converter?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Kernfuncties

Alternatieven voor de hex naar OKLCH converter

Voorbeelden van hex naar OKLCH

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Gangbare hex → OKLCH conversies (Tailwind v4)

Referentietabel van 10 populaire Tailwind v4-standaardpalet mid-schaduwen met hun HEX- en OKLCH-equivalenten. Waarden matchen de gepubliceerde paletprecisie van Tailwind v4 (drie decimalen op L en C, integer of één decimaal op H).

Zo gebruik je de hex naar OKLCH converter

1. 1

   Plak een hexcode in het HEX-veld

   Drop elke hex-waarde in het HEX-invoerveld — met of zonder de leidende `#`, in 3-cijferige verkorte vorm (`#F73`), 6-cijferige volledige vorm (`#3b82f6`), 4-cijferige alpha-verkorte vorm (`#F738`) of 8-cijferige alpha-volledige vorm (`#FF573380`). De parser normaliseert alle vijf invoervormen naar dezelfde interne kleur voordat hij OKLCH afleidt. Hoofdletters maken niet uit (`#3b82f6` en `#3B82F6` parsen identiek). Ongeldige tekens of verkeerde cijferaantallen produceren een rustige inline foutmelding; geldige hex werkt elk ander formaatveld in realtime bij, inclusief OKLCH.

2. 2

   Lees de OKLCH-triple af in het OKLCH-veld

   Het OKLCH-veld toont de waarde in de moderne vorm van CSS Color 4: `oklch(0.629 0.193 263.4)` voor een dekkende kleur, `oklch(0.629 0.193 263.4 / 0.5)` voor een kleur met alpha. L wordt afgerond op drie decimalen (matcht de gepubliceerde precisie van Tailwind v4), C op drie decimalen, H op één decimaal graad. Doordat OKLCH intern de bron van waarheid is, blijft de onderliggende float-precisie behouden over elk ander veld — round-trips terug naar hex blijven bit-stabiel, anders dan legacy converters die via HSL pivoteren en per round-trip een graad of twee drift oplopen.

3. 3

   Klik op Kopiëren om de OKLCH-string te pakken

   Elke formaatkaart heeft een Kopiëren-knop aan de rechterkant. Eén klik en de waarde belandt op je klembord — het knoplabel springt kort op "Gekopieerd!" zodat je het weet. De gekopieerde string is de canonieke CSS Color 4-syntax (`oklch(0.629 0.193 263.4)`), klaar om in een Tailwind v4 `@theme`-blok te droppen of in een shadcn/ui CSS-variabeledefinitie. Voor platformspecifieke uitvoer (CSS custom property, Tailwind v4-token, SwiftUI, Compose, Flutter) gebruik je de sectie Copy as code onder de picker — die snippets emitten het formaat dat elk platform native verwacht.

4. 4

   Bekijk de Display P3 / Rec2020 gamut-badges

   Drie gamut-badges (sRGB, Display P3, Rec2020) tonen of de huidige kleur binnen het reproduceerbare bereik van elke ruimte valt. Als de sRGB-badge rood wordt maar P3 groen, is de kleur een wide-gamut OKLCH die verzadigd rendert op Apple-hardware (iPhone, iPad, MacBook vanaf 2017+) maar gedesatureerd op een legacy 24-bit monitor. De knop **Snap to sRGB** gebruikt binaire chroma-reductie (CSS Color 4 §13 informatief algoritme) om de kleur in sRGB te krimpen terwijl L en H bewaard blijven, wat een hex-fallback oplevert die je via `@supports not (color: oklch(0 0 0))` kunt shippen.

5. 5

   Ook zichtbaar: RGB, HSL, OKLAB, HSV, HWB, CMYK, named color

   Dezelfde hex die je plakt licht ook de andere acht formaatvelden op — RGB voor canvas-aanroepen en hardware, HSL voor legacy CSS-variabelen, OKLAB voor paletwiskunde en kleurenblindheid-matrices, HSV en HWB voor designer-color-picker-workflows, CMYK voor printschattingen, en de dichtstbijzijnde CSS named color voor documentatie-proza. Je zit nooit alleen vast aan hex → OKLCH. De picker (SL-vierkant + hue-slider + alpha-slider) drijft alle negen tegelijk, en op Chromium-browsers samplet de EyeDropper-knop elke pixel op het scherm, ook buiten de browser.

Veelgemaakte fouten bij hex / OKLCH

Zet OKLCH C = 0,3 in de verwachting van "30% saturatie":
oklch(0.7 0.3 250) → kan voor blauwen de sRGB-gamut overschrijden
Wide-gamut-kleur rendert gedesatureerd op legacy-displays.

Behandel C als absolute chroma, check gamut-badges:
oklch(0.7 0.15 250) → comfortabel binnen sRGB voor dit L+H-paar
Gebruik de badges om de max C te vinden die in het doel-gamut past.

Kopieer HSL L-percentages direct naar OKLCH:
hsl(220 50% 30%) geport als oklch(0.30 0.10 220)
De twee kleuren ogen merkbaar verschillend in helderheid.

Herafleid OKLCH vanuit de oorspronkelijke hex, port geen HSL:
hex-bron → OKLCH-conversie → oklch(0.34 0.08 254)
De perceptuele L blijft correct; het palet voelt gelijkmatig.

Ship oklch(0.7 0.4 30) zonder sRGB-gamut te checken:
P3-displays renderen verzadigd rood; sRGB-displays renderen gedesatureerd
Merkkleur oogt inconsistent over gebruikershardware.

Check de sRGB gamut-badge, Snap to sRGB indien nodig, laag met @supports:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
P3-hardware krijgt de wide-gamut-waarde; sRGB-hardware krijgt de gesnapte fallback.

Definieer merkkleur alleen in OKLCH:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 en oude iOS Safari renderen helemaal geen kleur.

Laag met @supports voor nette fallback:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Moderne browsers krijgen OKLCH; legacy-browsers krijgen de hex-fallback.

Vervang lch() door oklch() in de verwachting van hetzelfde resultaat:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — totaal verschillende kleuren
Gekopieerd-plakt over ruimtes is de waarde stilletjes verkeerd.

Kies één ruimte en blijf erin:
oklch(0.629 0.193 263.4) voor moderne design systems
of lch(60% 50 240) — maar wissel niet van functienaam zonder opnieuw te converteren

Wie gebruikt hex naar OKLCH

Frontend-devs migreren naar Tailwind v4 OKLCH-tokens

Tailwind v4 standaardiseerde in januari 2025 op OKLCH voor zijn standaardpalet. Een v3-codebase met hex-gebaseerde merkkleuren migreren betekent elke hex naar OKLCH converteren en het resultaat in het nieuwe `@theme`-blok droppen. Plak elke hex hier, kopieer de `oklch()`-waarde, definieer `--color-primary: oklch(0.629 0.193 263.4)` en consorten. De live gamut-badges markeren kleuren die sRGB overschrijden, zodat je kunt beslissen of je de wide-gamut-waarde houdt voor Display P3-gebruikers of naar sRGB snapt.

shadcn/ui-thema-auteurs bouwen aangepaste paletten

Het CSS-variabele-thema van shadcn/ui gebruikt OKLCH voor elk token (`--background`, `--foreground`, `--primary`, enz.). Aangepaste thema's leiden vanuit een basis-merk-hex door naar OKLCH te converteren en daarna L te draaien voor de light/dark-varianten. Plak de merk-hex, lees de OKLCH-triple af, bouw de rest van het thema uit door L te verzetten terwijl je C en H vast houdt. Matcht de canonieke shadcn-workflow exact.

Design-system-auteurs genereren perceptueel-gelijkmatige ramps

Genereer een 50/100/200/.../900-ramp door de L-channel in gelijke OKLCH-stappen te verzetten terwijl je C en H vast houdt. De visuele afstand tussen aangrenzende stops oogt identiek over elke kleurtoon — wat een merkkleurpalet daadwerkelijk nodig heeft. Tailwind v4 gebruikt precies deze constructie voor zijn standaardpalet, en shadcn/ui spiegelt het. Plak elke merk-hex, lees de OKLCH af, genereer de ramp algoritmisch of via het Tints/Shades/Tones-paneel onder de picker.

Toegankelijkheidsengineers verifiëren contrast in OKLCH-ruimte

WCAG 2.1 en APCA-contrast rapporteren beide tegen de opgeloste sRGB-kleur, niet de OKLCH-triple — maar de OKLCH L van een merkkleur kennen maakt contrastafstemming voorspelbaar: verhoog L met 0,1 om AA tegen wit te halen, verlaag L met 0,1 om AA tegen zwart te halen. De gelijktijdige OKLCH + WCAG + APCA-weergave maakt de relatie zichtbaar. Plak de merk-hex, kijk naar de contrast-badges, stel L in OKLCH bij (voorspelbaarder dan HSL) totdat het paar beide metrieken haalt.

Web-devs bouwen wide-gamut-kleurentokens voor moderne displays

De meeste Apple-apparaten sinds 2017 (en veel moderne Android-apparaten) renderen Display P3 native. Merkaccentkleuren in OKLCH definiëren laat je P3-alleen verzadigde roden en groenen adresseren die geen enkele hexcode kan coderen. Plak een bestaande hex om de OKLCH af te lezen, push daarna de C-channel boven het sRGB-plafond om de extra P3-verzadiging te claimen. De gamut-badges bevestigen dat de nieuwe waarde in P3 past (en netjes terugvalt op sRGB-alleen schermen via browser-chroma-compressie).

Docenten leggen perceptuele-vs-geometrische lightness uit

De gelijktijdige OKLCH + HSL-weergave maakt het verschil tussen perceptuele en geometrische lightness overduidelijk. Plak een verzadigd groen en een verzadigd blauw op dezelfde HSL L=50%; de OKLCH L-waarden verschillen merkbaar omdat OKLCH werkelijk waargenomen helderheid meet. Sleep de HSL hue-slider en kijk hoe OKLCH L wiebelt terwijl je HSL L constant houdt — de curve is de gamma-eigenaardigheid gevisualiseerd. Een lesklaar demonstratie van waarom design systems naar OKLCH zijn gemigreerd.

Open-source-maintainers moderniseren tokendocumentatie

Oudere design-system-docs vermelden merkkleuren typisch alleen als hex-codes. Moderniseren naar OKLCH betekent dezelfde kleur in beide ruimtes tonen — de hex voor codeblock-compatibiliteit, de OKLCH voor de spec-tabel en de moderne tokendefinitie. Plak elke hex, kopieer de OKLCH-uitvoer, werk de docs bij. De deelbare URL-hash laat bijdragers ook linken naar de exacte kleur in een GitHub-issue zonder dubbelzinnigheid.

Wiskunde & pipeline van hex naar OKLCH

HEX → OKLCH is een 7-staps pipeline

De conversie routeert via vijf tussenrepresentaties: hex → integer sRGB → genormaliseerde sRGB (0-1) → linear-sRGB (gamma-gedecodeerd) → CIE XYZ D65 → OKLAB → OKLCH. Elke stap is een goed-gedefinieerde matrix of stukgewijze functie uit een primaire bron. De tool draait de volledige pipeline bij elke toetsaanslag; de wiskunde is snel genoeg (microseconden) dat geen debouncing nodig is. De tussenliggende RGB-tuple naast OKLCH tonen betekent dat je een onverwachte OKLCH-waarde kunt debuggen door de RGB-channels te inspecteren.

CSS Color 4 §11.2 gammafunctie

De sRGB → linear-sRGB-conversie gebruikt de stukgewijze functie van CSS Color 4 §11.2: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. De stukgewijze vorm (met een klein lineair segment dicht bij nul) vermijdt de numerieke instabiliteit van de pure-exponent-vorm bij heel donkere kleuren. Dit is dezelfde functie die ICC-profielen gebruiken om sRGB te coderen en dezelfde functie die browsers intern gebruiken bij het renderen van hex-codes. De inverse voor OKLCH → hex past dezelfde functie omgekeerd toe: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

CSS Color 4 §15.1-matrix: linear-sRGB ↔ XYZ D65

De matrix uit CSS Color 4 §15.1 converteert linear-sRGB naar CIE XYZ onder het D65-witpunt: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. De Y-rij geeft de sRGB-luminantieformule. Het is dezelfde matrix die in elke kleurmanagement-bibliotheek wordt gebruikt, inclusief ICC, Adobe Color Engine en de open-source LCMS-pipeline. De inverse matrix voor OKLCH → hex past de §15.1-inverse toe.

Ottosson 2020 OKLAB-matrices en kubuswortelstap

De XYZ D65 → OKLAB-conversie gebruikt twee matrices en een kubuswortelstap gepubliceerd in Björn Ottossons OKLAB-paper uit 2020. De eerste matrix transformeert XYZ naar een LMS cone-response-ruimte (losjes gemodelleerd op menselijke L/M/S-cone-gevoeligheden). Neem de kubuswortel van elke channel om het dynamisch bereik niet-lineair te comprimeren (de stap die perceptuele uniformiteit corrigeert). De tweede matrix transformeert kubuswortel-LMS naar OKLAB's L/a/b-coördinaten. Alle drie de operaties gebruiken de exacte waarden uit de referentie-implementatie van het paper; geen herafleidingen of afronding. De inverse voor OKLCH → hex past deze matrices omgekeerd toe.

OKLAB ↔ OKLCH is Cartesiaans-naar-polair

OKLAB's `a`- en `b`-assen vormen een chroma-vlak loodrecht op de L-as. OKLCH polair-codeert dat vlak: `C = sqrt(a² + b²)` (Euclidische afstand tot grijs), `H = atan2(b, a) * 180 / π` (hoek in graden, wrapped naar 0-360°). De inverse: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. De polaire vorm verdient de voorkeur boven OKLAB voor design-token-opslag omdat Hue een stabiele as is — Hue roteren cross-fadet niet per ongeluk door grijs, zoals het roteren van `a` of `b` in OKLAB wel kan.

Gamut-detectie via channel-range-check

Een kleur wordt als in-gamut beschouwd voor een doelruimte (sRGB, Display P3, Rec2020) als elke channel na conversie naar de primaria van die ruimte binnen `[-ε, 1 + ε]` valt, waar `ε = 1e-7` om float-precisie-ruis rond grenzen op te vangen. De gamut-badge voor elke ruimte wordt rood wanneer enige channel het bereik overschrijdt. OKLCH is gamut-onbegrensd — `oklch(0.7 0.4 30)` is een geldige coördinaat maar kan sRGB's 256-per-channel byte-ruimte overschrijden. De check draait bij elke toetsaanslag; gecombineerd met Snap to sRGB vangt dit de meest voorkomende adoptievalkuil op (wide-gamut OKLCH die niet correct weergeeft op legacy-schermen).

Snap-to-sRGB binaire chroma-reductie

Snap to sRGB matcht het informatieve gamut-mapping-algoritme in CSS Color 4 §13: houd L en H vast op de huidige waarden, binair-zoek C ∈ [0, currentC] voor de grootste C waarvan de sRGB-conversie in gamut blijft. De zoekactie draait maximaal 30 iteraties (precisie ~10⁻⁹), wat ruim genoeg is voor visuele nauwkeurigheid. L en H bewaren betekent dat de gesnapte kleur leest als dezelfde kleurtoonfamilie op dezelfde helderheid — hij verliest alleen verzadiging. We klippen RGB-channels niet direct omdat dat kleurtoon merkbaar vervormt (vooral in blauwen, die naar paars klippen).

Aanbevolen aanpak voor hex / OKLCH-workflows

Gebruik OKLCH als het canonieke tokenformaat in nieuwe code

Definieer voor elk design system dat in 2025 of later ship merkkleuren en paletramps in OKLCH. De L-as geeft automatisch perceptueel-gelijkmatige ramps; de Chroma-as kan wide-gamut-kleuren adresseren die hex niet kan coderen. Houd een hex-fallback voor oudere browsers via `@supports not (color: oklch(0 0 0))` of build-time PostCSS, maar maak OKLCH de bron van waarheid in je tokenstore. Tailwind v4 en shadcn/ui shippen beide op deze manier; nieuwe projecten kunnen hun voorbeeld volgen zonder wrijving.

Genereer ramps door L te verzetten en C en H constant te houden

De canonieke OKLCH-ramp-constructie: lock C en H, sweep L in gelijke stappen. Een 9-staps ramp `oklch(L 0.15 263)` voor L = 0,1, 0,2, …, 0,9 produceert visueel-gelijkmatige spacing over elke stap. Dit is precies wat Tailwind v4 intern doet. Sweep C niet naast L tenzij je de chromatische intensiteit van de ramp opzettelijk wilt laten variëren (zelden). Laat H niet driften over stappen — zelfs een 5°-drift maakt de ramp warrig.

Matche Tailwind v4's precisie: 3 decimalen L+C, 1 decimaal H

Het standaardpalet van Tailwind v4 publiceert OKLCH-waarden met drie decimalen op L en C en één decimaal op H — `oklch(0.629 0.193 263.4)` voor blue-500. Deze precisie matchen in je eigen tokens betekent dat paste-into-config-workflows identieke waarden produceren aan die welke Tailwind ship, en diff-tools markeren geen spurieuze verschillen. De standaardafronding van de tool volgt deze conventie; kopieer-plakken in een `@theme`-blok is bit-exact.

Draai wide-gamut OKLCH door de Display P3 gamut-check

Als je moderne Apple-hardware target (iPhone, iPad, MacBook vanaf 2017+) of HDR-aware content ship, laten de gamut-badges je C boven het sRGB-plafond duwen om de extra P3-verzadiging te claimen. Door browser toegepaste chroma-compressie voorkomt dat de kleur klippt op sRGB-alleen schermen. Pre-snap niet standaard naar sRGB tenzij je weet dat je hele publiek op legacy-displays zit — dat verliest 30%+ van de verzadiging die P3-hardware kan renderen.

Lever een hex-fallback via @supports voor pre-2023-browsers

Hoewel evergreen-browserondersteuning voor `oklch()` nu 94%+ is, heeft de long tail (IE 11, oude Android Chrome, embedded webviews) nog steeds een fallback nodig. Wikkel tokens in `@supports (color: oklch(0 0 0))` en lever een hex-variant in de alternatieve tak. De Snap to sRGB-uitvoer is precies die fallback — automatisch gegenereerd vanuit de huidige OKLCH-triple met L en H bewaard. Build-time PostCSS-plugins als `postcss-oklab-function` kunnen ook tijdens compilatie de sRGB-benadering inlinen.

Documenteer zowel de OKLCH als de bron-hex in je tokens

Wanneer je een CSS-variabele als `--color-primary: oklch(0.629 0.193 263.4)` ship, voeg een commentaar toe met de bron-hex: `/* source: #3b82f6 (Tailwind blue-500) */`. Zes maanden later, wanneer iemand een verwante schaduw moet afleiden of de waarde tegen een brand-guidelines-PDF moet checken, bewaart de bron-hex het volledige provenance-spoor. OKLCH alleen is betekenisvol maar moeilijker te herkennen op het zicht; de bron-hex is de identifier die de meeste teamgenoten als eerste zullen zoeken.

Gebruik de URL-hash om live kleurbeslissingen te delen

Elke kleurwijziging werkt automatisch de URL-hash bij als `#hex=3b82f6` of `#oklch=...`. Kopieer de URL in een Slack-thread of GitHub-issue en iedereen die hem opent landt op dezelfde kleur met dezelfde OKLCH-triple. Dit is betrouwbaarder dan een OKLCH-string in chat plakken — ontvangers typen soms de decimalen verkeerd of wikkelen de verkeerde precisie — en laat een design-review-thread verwijzen naar een exacte kleur in plaats van "het merkblauw dat we dinsdag bespraken". De hash wordt nooit naar de server verzonden.

Veelgestelde vragen