Color converter — HEX, RGB, HSL & OKLCH

Wat is een color converter?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
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 matrix), 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;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Kernfuncties

Color converter-alternatieven vergeleken

Voorbeelden van kleurconversie

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Zo gebruik je de color converter

1. 1

   Plak of typ elke kleur in elk formaat

   Elk van de 9 formaatvelden (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) is direct bewerkbaar — er is geen "Converteren"-knop om op te klikken. Plak een hex uit Figma, typ een oklch()-waarde uit een Tailwind-config, drop een hsl() uit een oude stylesheet, of typ zelfs een CSS named color zoals tomato. De tool parseert incrementeel terwijl je typt, dus een half-getypte waarde blaast de andere niet weg totdat je een geldig formaat vastlegt. Ongeldige invoer krijgt een rustige inline foutmelding; geldige invoer werkt de volledige grid bij.

2. 2

   Alle 9 formaten worden direct bijgewerkt

   De interne bron van waarheid is OKLCH (perceptueel uniform, gamut-onbegrensd), en elk ander formaat wordt daarvan afgeleid bij elke toetsaanslag. Het veld waarin je typt behoudt zijn cursorpositie ongemoeid — alleen de *andere* acht velden re-renderen. Dat betekent dat je de L-channel van OKLCH direct kunt bewerken en hex, RGB, HSL en CMYK in realtime ziet meeschuiven zonder je cursor te verliezen. De conversie-wiskunde draait volledig in JavaScript met dezelfde OKLAB-primitieven die in moderne browsers zitten.

3. 3

   Gebruik de picker voor visuele exploratie

   Onder de formaatgrid zit een saturation-lightness-vierkant (sleep om S+L voor de huidige kleurtoon te zetten), een hue-slider (sleep om rond de kleurencirkel te draaien), en een alpha-slider (sleep voor transparantie). Op Chromium-gebaseerde browsers (Chrome, Edge, Brave) activeert de Eyedropper-knop de native EyeDropper-API — klik ergens op het scherm, ook buiten het browserscherm, om de kleur van die pixel te samplen. Safari en Firefox shippen de API nog niet, dus daar is de knop verborgen en blijven het SL-vierkant + de hue-slider de primaire picker.

4. 4

   Check gamut en contrast in één oogopslag

   Drie gamut-badges (sRGB, Display P3, Rec2020) tonen of de huidige kleur binnen het reproduceerbare bereik van elke ruimte valt — handig als je in OKLCH werkt en wilt weten welke displays de waarde accuraat zullen weergeven. De contrastrij toont de WCAG 2.1-ratio tegen zowel wit als zwart, plus de APCA Lc-score (toekomstgerichte WCAG 3-metriek). Pass / fail-badges (AA, AAA) verschijnen inline. Als een kleur buiten gamut van sRGB valt, verkleint een Snap to sRGB-knop de chroma tot hij past.

5. 5

   Kopieer in de native syntax van je platform

   Elk van de 9 formaatvelden heeft een eigen Kopiëren-knop — één klik, de waarde belandt op je klembord, het label springt kort op "Gekopieerd!" zodat je het weet. Onder de picker genereert de sectie Copy as code plak-klare snippets voor vijf platforms: CSS custom property, Tailwind v4 @theme-token, SwiftUI Color(red:green:blue:)-literal, Jetpack Compose Color(0xFF...)-constante, en Flutter Color(0xFF...). De URL-hash (#hex=... of #oklch=...) wordt ook bijgewerkt zodat je een live link naar exact dezelfde kleur kunt delen.

Veelgemaakte fouten bij kleurconversie

Aannemen dat een HSL-palet perceptueel uniform is:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
Op het scherm oogt dit ongelijkmatig verdeeld.

Gebruik OKLCH voor perceptueel-uniforme ramps:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
Op het scherm oogt dit gelijkmatig verdeeld.

Stuur onze CMYK-uitvoer direct naar een pers:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Het geprinte resultaat kan vies of oververzadigd ogen.

Stuur de originele hex naar de drukker:
hex #FF6347 → laat de drukker ICC-converteren tegen zijn pers
Het geprinte resultaat matcht de schermkleur veel nauwkeuriger.

Doen alsof Lc 60 = WCAG 4,5:1:
APCA Lc 60 → "dit haalt AA"
WCAG 2-ratio voor hetzelfde paar zou 3,8:1 kunnen zijn (faalt AA).

Check beide metrieken onafhankelijk:
WCAG 2-ratio ≥ 4,5:1 voor AA-compliance lopende tekst, EN
APCA |Lc| ≥ 75 voor real-world leesbaarheid.
Beide moeten slagen, niet de een als substituut voor de ander.

L verzetten in HSL voor schaduwen:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90% oogt uitgewassen; 30% oogt veel donkerder dan de afstand naar 60%.

L verzetten in OKLCH voor schaduwen:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Elke stap oogt als dezelfde visuele afstand.

Kopieer 8-cijferige hex naar een legacy-parser:
#FF573380 → parser kapt af → #FF5733 (geen alpha)
De 50%-transparantie gaat stilletjes verloren.

Verifieer dat het doel 8-cijferige hex ondersteunt, of gebruik rgba():
voor modern CSS: #FF573380 (8-cijferige hex)
voor legacy-support: rgba(255, 87, 51, 0.5) (altijd ondersteund)
Expliciete alpha-syntax voorkomt stille afkapping.

Snap elke OKLCH-kleur standaard naar sRGB:
oklch(0.7 0.25 30) → snap → oklch(0.7 0.18 30)
P3-displays verliezen 30%+ verzadiging zonder reden.

Check eerst de Display P3-badge:
als fits-P3: houd de wide-gamut-waarde, voeg sRGB-fallback toe via @supports
als exceeds P3: dan snappen naar sRGB
Laat de wide-gamut-hardware zijn werk doen.

Wie gebruikt deze tool

Frontend-devs migreren naar Tailwind v4 OKLCH-tokens

Tailwind v4 standaardiseerde in 2024 op OKLCH voor zijn standaardpalet. Het migreren van een oud HSL- of hex-gebaseerd design system betekent honderden merkkleuren naar OKLCH omzetten. Plak elke hex, kopieer de OKLCH-uitvoer, drop in het @theme-blok. De live gamut-badges markeren kleuren die sRGB overschrijden zodat je kunt beslissen of je de wider-gamut-waarde houdt voor Display P3-displays.

Designers vertalen Figma-kleuren naar iOS / Android

Figma exporteert standaard hex, maar iOS wil SwiftUI Color(red:green:blue:)-literals en Android wil Jetpack Compose Color(0xFF...)-constantes. Plak de Figma-hex één keer, kopieer de SwiftUI-snippet voor de iOS-engineer en de Compose-snippet voor de Android-engineer — beide al in de exacte syntax die elk platform verwacht, met de originele hex bewaard in een commentaar voor traceerbaarheid.

Designers bereiden printproofs voor (CMYK-benadering)

Wanneer een merkkleur op een gedrukt visitekaartje moet verschijnen, geeft de CMYK-benadering een snelle schatting om te delen met de drukkerij vóór de echte ICC-conversie. Plak de merk-hex, kopieer de CMYK-percentages, stuur naar de drukker voor een snelle prijsopgave — laat dan de ICC-profiel-bewuste conversie van de drukker over om de uiteindelijke kleurmatch tegen de specifieke pers te doen.

Toegankelijkheidsengineers verifiëren WCAG en APCA

WCAG 2.1 is de regelgevende standaard (ADA, EAA, Section 508) vandaag; APCA Lc is de voorgestelde WCAG 3-opvolger. Beide metrieken naast elkaar tonen betekent dat een designer een lopende-tekst-kleur kan verifiëren op 4,5:1 WCAG tegen wit, en dan sanity-checken dat hij ook door APCA Lc 75 komt, op één scherm — zonder tussen twee aparte calculators te springen.

Onderwijzers leggen kleurruimte-concepten uit

De simultane negen-veldenweergave maakt kleurruimte-relaties zichtbaar. Typ een OKLCH-waarde, kijk hoe HSL afdwaalt omdat L iets anders betekent in elke ruimte. Sleep de hue-slider en kijk hoe hex, RGB en CMYK allemaal bijwerken. Laat zien hoe de gamut-badges rood worden als je chroma voorbij sRGB duwt. De tool is zijn eigen klaslokaal-demo voor een graphics- of HCI-cursus op universiteitsniveau.

Brandmanagers vinden de dichtstbijzijnde CSS named color

Wanneer de marketingtekst zegt "een tomaatkleurig accent" maar de feitelijke merk-hex is #FF6347, geeft het Named-veld tomato (exact) terug omdat dat letterlijk is wat tomato oplevert in de CSS-spec. Voor bijna-match-hexen geeft het veld de dichtstbijzijnde named color terug met de ΔE-afstand in OKLAB — handig voor documentatie, proza en informeel kleurbenoemen.

Web-devs converteren legacy HEX-paletten naar OKLCH

Een oudere site kan een merkpalet van 50 kleuren hebben dat in CSS custom properties als hex-codes is gedefinieerd. Moderniseren naar OKLCH laat het merkteam dezelfde ramps in een perceptueel-uniforme ruimte uitdrukken. Plak elke hex, kopieer de OKLCH-uitvoer, swap in de variabele-definities. Het Tints/Shades-paneel eronder verifieert dat de resulterende ramp visueel gelijkmatig is voor je shippt.

Open-source-maintainers documenteren design tokens

Design-token-documentatie moet meestal dezelfde kleur in meerdere syntaxen tonen — hex voor het CSS-codeblok, OKLCH voor de spec-tabel, de named color voor proza-vermeldingen. De simultane-veldweergave laat een maintainer elk in één pass kopiëren in plaats van drie aparte conversies opnieuw te draaien. De deelbare URL-hash laat contributors ook linken naar de exact besproken kleur in een GitHub-issue.

Wiskunde & algoritmen achter kleurconversie

OKLCH als interne bron van waarheid

De tool houdt de canonieke kleurwaarde intern aan als OKLCH-triple. Elk bewerkbaar veld leidt zijn weergavewaarde uit dat triple af op elke toetsaanslag; elke bewerking door de gebruiker werkt eerst het triple bij en triggert dan een re-render van de andere acht velden. Dit elimineert de per-stap float-drift die converters teistert die via HSL of sRGB als pivot routen. De keuze voor OKLCH boven OKLAB is bewust — de polaire vorm behoudt Hue als stabiele as, dus het slepen van de hue-slider crossfadet niet per ongeluk door grijs. Per Björn Ottossons paper uit 2020 is OKLAB's perceptuele uniformiteit het sterkste argument om het te behandelen als lingua franca van moderne kleur-wiskunde.

Matrix-bronnen (W3C CSS Color 4 + Ottosson 2020)

Elke conversiematrix in de codebase wordt geciteerd naar zijn primaire bron. De sRGB ↔ linear-sRGB stukgewijze gammafunctie is W3C CSS Color 4 §11.2 (v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4). De linear-sRGB ↔ CIE XYZ D65 3×3-matrix is CSS Color 4 §15.1. De XYZ D65 ↔ LMS-matrix en de OKLAB derdemachtswortel-stap zijn uit Ottossons referentie-implementatie op https://bottosson.github.io/posts/oklab/, precies zoals gepubliceerd. Geen enkele matrix wordt herberekend of opnieuw afgeleid — ze letterlijk overnemen houdt de uitvoer identiek aan de referentievectoren van de spec.

Naïeve CMYK-formule en de ICC-caveat

Onze CMYK-uitvoer gebruikt de standaard schoolboekformule: K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K) werkend op genormaliseerde sRGB-waarden. Dit is een bewuste benadering. Echte printnauwkeurigheid vereist een ICC-profiel-conversie tegen de specifieke pers, inkt (bijv. US Web Coated SWOP v2, Fogra39, Japan Color 2011) en papier, wat kanalen 5-15% kan verschuiven. We tonen het CMYK-veld met een zichtbare disclaimer zodat gebruikers onze waarden niet direct naar een pers shippen. Behandel de uitvoer als sanity check voor offertes, niet als deliverable.

Gamutdetectie via channel-range-check

Een kleur wordt als in-gamut beschouwd voor een doelruimte (sRGB, Display P3, Rec2020) als elke channel binnen [-ε, 1 + ε] valt na conversie naar de primaria van die ruimte, waarbij ε = 1e-7 om float-precisie-ruis rond grenzen op te vangen. De gamut-badge voor elke ruimte wordt rood wanneer een channel het bereik overschrijdt. Dit vangt het gangbare geval — een wide-gamut OKLCH-kleur als oklch(0.7 0.4 30) rapporteert buiten-sRGB maar in-P3, en vertelt je welke displays hem accuraat zullen weergeven. De check draait op elke toetsaanslag.

Chroma-reductie snap-algoritme

Snap to sRGB gebruikt binaire zoek op de Chroma-as: houd L en H vast op de huidige waarden, zoek C ∈ [0, currentC] voor de grootste C waarvan de sRGB-conversie in-gamut blijft. De zoek loopt maximaal 30 iteraties (precisie ~10⁻⁹), wat ruim genoeg is voor visuele nauwkeurigheid. Dit matcht het informatieve gamut-mapping-algoritme beschreven in CSS Color 4 §13 — lightness en hue behouden terwijl alleen chroma wordt verlaagd, houdt de gesnapte kleur herkenbaar binnen dezelfde kleurtoon-familie. We clippen niet direct op RGB-kanalen omdat dat hue merkbaar vervormt (vooral bij blauwen).

Brettel + Machado CVD-matrices

Kleurenblindheid-simulatie gebruikt twee gepubliceerde matrix-families. De drie dichromaties — protanopia, deuteranopia, tritanopia — gebruiken Brettel-Viénot-Mollon 1997-matrices die werken in linear-RGB (eerst gamma-decoderen, matrix toepassen, weer gamma-encoderen). De drie anomale trichromaties — protanomaly, deuteranomaly, tritanomaly — gebruiken Machado-Oliveira-Fernandes 2009-matrices op severity 0,66, wat overeenkomt met een typische anomale-trichromatie-patiënt. Achromatopsia en gedeeltelijke achromatomaly gebruiken rec601 luminantie-gewichten (0,299R + 0,587G + 0,114B) voor een grijsschaal-projectie. Alle acht simulaties renderen op elke kleurwijziging.

WCAG 2 vs APCA: wanneer welke

WCAG 2.x (huidige standaard) berekent een symmetrische contrastratio uit relatieve luminantie: (L1 + 0,05) / (L2 + 0,05), target 4,5:1 voor normale lopende tekst en 7:1 voor AAA. Dat is de wettelijke compliance-ondergrens voor toegankelijkheidsaudits in 2026. APCA (Accessible Perceptual Contrast Algorithm) is de voorgestelde WCAG 3-opvolger — polariteit-gevoelig (licht-op-donker scoort anders dan donker-op-licht), beter gecorreleerd met door mensen ervaren leesbaarheid, target |Lc| ≥ 75 voor lopende tekst. Beide metrieken in één rij laten een designer WCAG 2 halen voor compliance en APCA voor real-world leesbaarheid zonder tussen twee aparte calculators te hoeven springen.

Aanbevolen aanpak voor kleurconversie

Prefereer OKLCH voor design-system-tokens; HEX voor legacy

Voor elk nieuw design system dat in 2025 of later shipt, definieer merkkleuren en palet-ramps in OKLCH. De L-as geeft automatisch perceptueel-gelijke 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 canonieke waarde in je tokenopslag. Legacy-systemen met duizenden bestaande hex-variabelen kunnen op hex blijven tot een geplande migratie — churn niet om het churnen.

Behandel CMYK-uitvoer als benadering, bevestig bij de drukker

De CMYK-getallen die deze tool oppervlakt zijn een naïeve sRGB-gebaseerde formule, geen ICC-profiel-conversie. Gebruik ze voor offertes en interne comps. Stuur vóór elke echte printrun de originele hex (niet de CMYK-benadering) naar de drukker en laat hem zijn eigen ICC-conversie draaien tegen de specifieke pers, inkt en papier. De 5-15% channel-shift van een goede conversie kan makkelijk een scherp rood in een vies oranje veranderen als de benadering direct wordt geshipt.

Gebruik APCA Lc voor toekomstgerichte toegankelijkheid

WCAG 2.x blijft nog enkele jaren de regelgevende ondergrens, maar APCA is de richting waarin de standaard beweegt. Haal voor nieuwe ontwerpen |Lc| ≥ 75 voor lopende tekst en |Lc| ≥ 60 voor grote tekst naast de WCAG 2.1-ondergrenzen. APCA vangt leesbaarheidsproblemen op die WCAG 2's symmetrische ratio mist — vooral dunne-streek-tekst op heldere achtergronden, waar de WCAG-ratio er goed uitziet maar de tekst feitelijk verdwijnt op normale leesafstand.

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

Als je moderne Apple-hardware (iPhone, iPad, MacBook vanaf 2017) target of HDR-bewuste content shipt, definieer dan merkkleuren in OKLCH en gebruik de Display P3-badge om te verifiëren dat ze in P3 passen, zelfs als ze sRGB overschrijden. De wider-gamut-kleuren ogen merkbaar verzadigder op P3-displays en degraderen netjes via browser-toegepaste chroma-compressie op sRGB-only-schermen. Pre-snap niet naar sRGB tenzij je weet dat je hele publiek op legacy-displays zit.

Kies perceptueel uniforme schaduwen via OKLCH-tonen

Wanneer je een 50/100/200/.../900-ramp voor een merkkleur genereert, gebruik dan het Tones-paneel: het verzet L in gelijke stappen met vaste C en H. Het resultaat is een perceptueel-gelijkmatige ramp waar de visuele afstand tussen 400 en 500 identiek oogt aan die tussen 500 en 600. Met de hand HSL-ramps tunen voor dezelfde gelijkmatigheid is een oefening van meerdere uren per kleur; OKLCH geeft het gratis.

Gebruik de Eyedropper spaarzaam voor cross-tab kleurmatching

De EyeDropper-API (alleen Chromium per 2026) laat je ergens op het scherm klikken — ook buiten de browser — om de kleur van die pixel te samplen. Handig voor het matchen van een kleur uit een screenshot, een videoframe of de UI van een andere app. Behandel het resultaat als startpunt, niet als eindwaarde — schermweergave past kleurmanagement toe dat kan afwijken van het bronbestand. Voor canonieke merkkleuren: haal de hex altijd uit de designbron (Figma, Sketch, het merkrichtlijnen-PDF) in plaats van eyedropperen van een screenshot.

Bookmark URL's met #hex=... voor deelbare paletbeslissingen

De huidige kleur codeert automatisch in de URL-hash als #hex=... of #oklch=.... Kopieer de URL, plak in een Slack-thread of een GitHub-issue, en iedereen die hem opent landt op exact dezelfde kleur. Handig voor design-review-threads waarin "het merkblauw" één specifiek OKLCH-triple moet betekenen. De hash werkt bij op elke wijziging, dus de URL in je adresbalk is altijd de live huidige kleur — bookmark 'm om later naar een specifiek palet terug te keren.

Veelgestelde vragen