Eén kleur in elke notatie die CSS heeft, met elke rij een complete waarde om te plakken. De invoer accepteert hex van 3, 4, 6 of 8 cijfers naast de functionele vormen en de 148 trefwoorden. Waar een kleur buiten sRGB valt, spreekt de tabel zichzelf met opzet tegen, en juist dat verschil is het interessante deel van deze pagina.

Elk formaat komt uit één parse, niet uit de rij erboven

De invoer wordt één keer geparst naar sRGB-kanalen als floats van 0 tot 1, plus alpha, en elke rij wordt daaruit berekend en niet doorgeketend via de rij erboven. HSL en HWB zijn cilindrische herformuleringen van diezelfde drie getallen. OKLab, OKLCH, LAB en LCH lineariseren de kanalen, vermenigvuldigen naar CIE XYZ met een 3x3-matrix en rekenen van daaruit verder, met de matrices uit CSS Color 4. Er wordt niets afgerond tot het op het scherm komt, dus intern is heen en terug exact: over meer dan 200.000 willekeurige sRGB-kleuren gaf hex naar OKLCH en terug elke keer dezelfde hex. De vier decimalen op het scherm zijn een aparte kwestie, behandeld onder Veelvoorkomende problemen.

Waarom lab() en oklch() het oneens zijn over wit

CSS lab() en lch() zijn gedefinieerd op het D50 witpunt, terwijl oklch(), oklab() en sRGB op D65 staan. Tussen die twee omrekenen vraagt een chromatische adaptatie, niet alleen een formule. D65 is ruwweg daglicht op het middaguur rond 6500 K, en daar zijn schermen op gekalibreerd. D50 is het warmere wit van 5000 K uit de drukkerij en het ICC-werk, en CSS erfde dat voor lab() uit de ICC profile connection space. Adaptatie is het rekenwerk voor wat een stimulus onder de andere lichtbron zou moeten zijn om als dezelfde kleur te ogen; deze pagina gebruikt de Bradford-matrices uit CSS Color 4.

Sla die stap over en er gaat niets luid mis. Wit komt eruit als lab(100 -2.4 -19.39) in plaats van lab(100 0 0), een vijfde van de b-as het blauw in. Het is de meest voorkomende bug in kleurconverters omdat de getallen er nog steeds aannemelijk uitzien en maar een paar eenheden van andere tools afwijken. Je kunt elke converter in vijf seconden testen: geef hem #ffffff en kijk of a en b allebei 0 zijn.

Wat het sRGB-gamut is, en hoe een kleur erbuiten valt

sRGB beschrijft alleen de kleuren binnen de driehoek die zijn drie primaries opspannen, terwijl OKLCH, OKLAB, LAB en LCH elke kleur beschrijven die een mens kan zien. Een oklch() waarde is dus niet per se te tonen, en dat is geen fout in die waarde. Probeer het voorbeeld oklch(0.72 0.28 145) hierboven: dat groen wil meer chroma dan de groene primary van sRGB heeft, en het rekenwerk geeft een negatief rood kanaal terug, en dat is de vergelijking die zegt dat de kleur hier niet bestaat.

Er moet iets wijken, en dat kan op twee manieren. Elk kanaal apart afkappen op 0 en 1, wat browsers vandaag doen, komt uit op #00cd00, en dat leest terug als oklch(0.735 0.2501 142.5): de lichtheid schoof op en de tint schoof 2,5 graden. Chroma verlagen bij gelijke lichtheid en tint, de omzetting die CSS Color 4 voorschrijft, komt uit op #00c737, oftewel oklch(0.72 0.2265 145). Dezelfde tint, en het enige dat verdwijnt is verzadiging die toch nooit te tonen was.

Deze pagina doet het tweede. Buiten het gamut dragen de rijen HEX, RGB, HSL en HWB de omgezette kleur en zeggen dat erbij, terwijl de rijen OKLCH, OKLAB, LAB en LCH houden wat je invoerde met de omgezette waarde op de rij eronder. Weinig converters maken dat onderscheid, en zo wordt een felle oklch() uit een ontwerpbestand stilletjes een andere tint in de stylesheet.

Waarom OKLCH het overstappen waard is

Twee kleuren met dezelfde OKLCH-lichtheid ogen even licht. Twee met dezelfde HSL-lichtheid niet, en dat scheelt flink. hsl(60 100% 50%) is geel en hsl(240 100% 50%) is blauw, en allebei claimen ze een lichtheid van 50%. Hun relatieve luminantie volgens WCAG is 0,9278 en 0,0722, wat de contrastverhouding ertussen op 8,0:1 zet: je zou de een als tekst op de ander kunnen zetten en het zou op AAA leesbaar zijn. In OKLCH zijn ze L 0,968 en L 0,452, en dat is de aflezing die past bij wat je oog meldt. De L van HSL is het midden van het grootste en het kleinste sRGB-kanaal, een feit over de codering en niet over het zien. OKLab is afgestemd op perceptuele data zodat gelijke stappen er gelijk uitzien, en daarom blijft een toonschaal met stappen in OKLCH gelijkmatig waar HSL in het midden modderig wordt.

CMYK is hier een benadering

Geen enkele browsertool kan een CMYK-waarde geven die klopt voor drukwerk, deze ook niet. Deze vier getallen zijn de standaard rekenkundige omkering van sRGB. Een echte separatie hangt af van een ICC-profiel voor een bepaalde inktset, papiersoort en pers: dezelfde waarden drukken anders op gestreken en ongestreken papier, en het profiel bepaalt hoeveel van de CMY onder een donker vlak door zwart wordt vervangen. Gaat het werk naar een drukker, vraag dan welk profiel ze gebruiken (SWOP, FOGRA39, FOGRA51 en Japan Color zijn de gebruikelijke antwoorden) en neem de getallen van hen over. Let ook op de schrijfwijze: device-cmyk() is CSS Color 5 en de enige CMYK die een stylesheet accepteert.

Veelvoorkomende problemen

De hex komt één cijfer anders terug. Kopieer de oklch() waarde, plak hem terug, en ongeveer één sRGB-kleur op de 1.150 landt in één kanaal één 8-bits stap ernaast: #00fa9a komt terug als #01fa9a. Dat komt door de vier getoonde decimalen, niet door de omrekening. Houd hex aan als bron van waarheid waar het byte voor byte gelijk moet blijven.
De laatste twee hexcijfers zijn geen percentage.#ff000080 is 50,2% alpha, geen 80%. Het paar loopt van 00 tot ff, gelezen als 0 tot 255, dus een nette 50% heeft geen exacte schrijfwijze.
Een benoemde kleur is niet bij te stellen. Er zijn 148 trefwoorden en niets ertussen. Waar de rij "dichtstbijzijnde" zegt, wordt de afstand in OKLab gemeten, waar ongeveer 0,02 de grens is van wat de meeste mensen nog uit elkaar houden. Een trefwoord heeft ook nergens plek voor alpha, dus die rij laat het vallen.
Komma's of spaties.rgb(255, 0, 0) en rgb(255 0 0) werken allebei in de huidige browsers. Deze pagina geeft de vorm met spaties, en dat is de vorm die none als waarde en een / alpha aankan zonder over te schakelen naar rgba().

Veelgestelde vragen

Is hex hetzelfde als rgb()?

Ja. Allebei zijn ze 8 bits per kanaal sRGB, dus #ff8800 en rgb(255 136 0) zijn dezelfde 24 bits in een ander grondtal geschreven. Alpha inbegrepen: #ff880080 is rgb(255 136 0 / 0.502).

Welk formaat schrijf ik in een stylesheet?

oklch() voor alles wat je gaat bewerken: lichter maken, mengen, een schaal genereren. Hex of rgb() voor vaste waarden die een ontwerper aanlevert. oklch() zit sinds mei 2023 in elke grote browser (Safari 15.4, Chrome 111, Firefox 113).

Waarom melden LAB en OKLAB een andere lichtheid?

Het zijn verschillende schalen, afgestemd op verschillende data. De L van CIE Lab loopt van 0 tot 100 en stamt uit 1976; de L van OKLab loopt van 0 tot 1 en is in 2020 afgestemd, vooral om de tintverschuivingen recht te zetten die Lab in blauwtinten laat zien. #1e90ff is L 58,36 in LAB en L 0,652 in OKLAB. 58,36 gedeeld door 100 is geen 0,652, en dat gat is de correctie en geen afrondingsfout.

Gaat er bij het omrekenen iets verloren, en is het privé?

Naar HEX of RGB gaan kwantiseert naar een van 16.777.216 waarden, dus een lab() met decimale precisie klikt vast op de dichtstbijzijnde 8-bits kleur. Al het andere is verliesvrij binnen de precisie van een float, en alpha gaat door elk formaat mee dat het ondersteunt. Elke omrekening draait in dit tabblad: er wordt geen kleur ergens heen gestuurd om omgerekend te worden, en de parameter ?c= in de adresbalk is de enige plek waar de kleur die je typte terechtkomt. De rest van de kleurtools werkt op dezelfde manier.