Kleurcode omzetten

HEX en RGB zijn hetzelfde, anders opgeschreven. `#663399` zijn drie paren hexadecimale cijfers — 102, 51 en 153 — en `rgb(102 51 153)` zijn diezelfde getallen decimaal. Bij het omzetten kan niets verloren gaan, want alleen het talstelsel verandert.

HSL en HSV beschrijven dezelfde kleur vanuit een mens in plaats van vanuit een scherm. In plaats van hoeveel rood, groen en blauw je mengt, geven ze de tint als hoek op een kleurencirkel, dan de verzadiging en de lichtheid. Daarom grijpen ontwerpers ernaar: een kleur tien procent lichter maken is één getal in HSL en drie ondoorzichtige in RGB.

Al het andere op deze pagina is een herschikking van dezelfde drie getallen. CMYK niet: het beschrijft inkt op papier, en hoe een mengsel van cyaan, magenta, geel en zwart er werkelijk uitziet, hangt af van de pers, het papier en het kleurprofiel. Geen formule heeft daar toegang toe.

Wat je hier krijgt is de gebruikelijke nominale omrekening, dezelfde die elk hulpmiddel doet dat CMYK aanbiedt zonder naar een profiel te vragen. Als vertrekpunt is het prima, als drukwaarde niet. Als de kleur er echt toe doet, wil de drukker de hexwaarde en maakt hij de scheiding met zijn eigen profiel.

Alfa gaat mee: `#663399cc`, `rgba(102, 51, 153, 0.8)` en `rgb(102 51 153 / 80%)` betekenen dezelfde kleur op 80% dekking, en alle drie worden goed gelezen. De hexvorm van acht tekens kom je het minst tegen en zet de meeste hulpmiddelen op het verkeerde been, terwijl het gewoon de zescijferige vorm is met een vierde paar voor de dekking.

In CMYK bestaat daar geen tegenhanger van, want inkt komt op het papier of niet. Is de ingevoerde kleur deels doorzichtig, dan beschrijven de CMYK-waarden hem alsof hij dekkend was.

Onder de notaties staan twee getallen: de contrastverhouding van je kleur tegen wit en tegen zwart. Ze komen uit de WCAG-definitie, en dat is geen gemiddelde helderheid — de kanalen zijn gewogen, omdat het oog veel gevoeliger is voor groen dan voor blauw, en elk wordt eerst gelineariseerd.

Praktisch bepaal je ermee welke tekstkleur op een achtergrond hoort. 4,5 is de drempel voor lopende tekst en 3 voor grote koppen, dus een achtergrond waarvan de beste verhouding onder 4,5 zakt, vraagt om grotere letters of een andere achtergrond. Het is de snelste manier om te ontdekken dat een huiskleur die er in een ontwerp goed uitziet, geen toegankelijkheidscontrole doorstaat.

Een kleur die niet te lezen is, wordt als onleesbaar gemeld in plaats van stilletjes vervangen. Dat klinkt vanzelfsprekend en is ongewoon: de gebruikelijke manier om deze pagina te bouwen is de tekst aan de browser geven en teruglezen wat die ervan maakte — vier regels code die op `#12345` antwoorden met de vorige kleur.

Een ontbrekend cijfer ziet er dan uit als een geslaagde omzetting, en je merkt het pas als de tint elders niet klopt. Hier wordt uitdrukkelijk ontleed. Dat kost een tabel met de honderdachtenveertig CSS-trefwoorden en levert je een foutmelding op in plaats van een geloofwaardig verkeerd antwoord.