Kleurconverter — online HEX-, RGB-, HSL-converter _

Wat is kleurconversie?

Elke kleur die je browser weergeeft is uiteindelijk een sRGB-triplet — drie getallen tussen 0 en 255 voor de rode, groene en blauwe kanalen, plus een optionele alpha. De CSS Color Level 4-specificatie definieert verschillende tekstformaten die heen en weer naar hetzelfde triplet converteren, plus de perceptueel uniforme OKLCH-ruimte. Deze tool leest elk daarvan, converteert naar alle, en rapporteert de WCAG 2.1-contrastverhouding tegen een tweede kleur zodat je toegankelijke interfaces met vertrouwen kunt uitleveren.

Hoe werkt kleurconversie?

Conversie is een reeks goed gedefinieerde lineaire en niet-lineaire transformaties. Elke stap draait in je browser — geen enkele invoer bereikt ooit onze servers:

1. Je invoer wordt geparseerd. De tool detecteert automatisch 3-, 4-, 6- of 8-cijferige HEX, de functionele vormen rgb()/rgba()/hsl()/hsla()/hsv()/hwb() in zowel de oude komma-syntaxis als de moderne slash-alpha-syntaxis, of een van de 150 benoemde CSS-kleuren (rebeccapurple inbegrepen).
2. De geparseerde kleur wordt genormaliseerd naar canonieke sRGB — vier floats {r, g, b, a} elk in het bereik 0–1. Dit is de enige bron van waarheid waaruit elk uitvoerformaat wordt afgeleid.
3. HEX komt voort uit het afronden van elk kanaal naar zijn 0–255-bytewaarde en het samenvoegen van de hex-cijfers. RGB / RGBA printen dezelfde bytes. HSL en HSV passen de standaard cilindrische-coördinatenalgoritmes van het W3C toe; HWB leidt de tint af uit HSV, witheid uit min(r, g, b) en zwartheid uit 1 - max(r, g, b).
4. CMYK is een naïeve benadering — k = 1 - max(r, g, b), daarna c, m, y uit de resterende kanalen. Het is geschikt voor schermvoorbeeld maar niet voor drukwerk: echte CMYK-uitvoer vereist een ICC-profiel dat deze tool bewust niet insluit.
5. OKLCH volgt het voorwaartse pad uit css-color-4: sRGB wordt gelineariseerd, vermenigvuldigd door de LMS-matrix, kubisch worteltrekkend, vermenigvuldigd door de LMS-naar-OKLab-matrix, en ten slotte omgezet van rechthoekige OKLab naar polaire OKLCH. OKLCH is perceptueel uniform, wat het de juiste ruimte maakt om paletten te ontwerpen die er voor het menselijk oog gebalanceerd uitzien.

Waarom deze kleurconverter gebruiken?

• Privacy: elke conversie draait in je browser met gewone JavaScript. De kleur die je plakt verlaat nooit je apparaat, wat belangrijk is voor onuitgegeven merkwerk, interne designsystemen en klant-mockups onder NDA.
• Designer-naar-ontwikkelaar-overdracht: plak de HEX uit Figma en lees de rgb()-string terug voor een Tailwind-configuratie, de hsl()-string voor een CSS-eigenschap, of de oklch()-string voor een modern palet — elk formaat op één plek, geen kopiëren en plakken tussen tabbladen.
• WCAG-nauwkeurigheid: de contrastchecker gebruikt de exacte WCAG 2.1-formule voor relatieve luminantie en de gepubliceerde AA- (4,5 / 3,0) en AAA-drempels (7,0 / 4,5) voor normale en grote tekst. De gerapporteerde verhouding komt tot op 0,01 overeen met handmatige calculators.
• Donkere modus en paletafleiding: HSL en OKLCH stellen lichtheid bloot als één enkel kanaal, dus is het eenvoudig om een merkkleur op of neer te verschuiven langs de lichtheidsas om bijpassende donkere-modus-tokens af te leiden of om een palet van 10 stappen te genereren uit één enkele zaadkleur.

Wat zijn veelvoorkomende toepassingen van kleurconversie?

Kleurconversie duikt op in webontwikkeling, ontwerp en toegankelijkheidswerk:

• Designsystemen: het converteren van een merk-HEX naar de bijbehorende HSL- en OKLCH-tokens voor een CSS-eigenschapsschaal, en vervolgens verifiëren dat elke tokencombinatie WCAG AA haalt tegen de paginaachtergrond.
• Toegankelijkheidsaudits: een voorgrond- en achtergrondkleur uit een echte productschermafbeelding plakken en in één oogopslag de contrastverhouding plus AA/AAA-oordelen voor zowel normaal als zwaar gewogen grote tekst aflezen.
• Cross-tool-rondreizen: een kleur uit een screenshot-picker (HEX) halen, hier plakken en de hsl()- of oklch()-string direct in Tailwind, Figma-tokens of een CSS-in-JS-thema kopiëren.

Hoe ziet een voorbeeld van kleurconversie eruit?

Neem het beroemde rebeccapurple. De opzoeking van benoemde kleuren herleidt het naar #663399. RGB-conversie geeft rgb(102, 51, 153). HSL-conversie geeft hsl(270, 50%, 40%) — een violette tint, halverzadigd, vier-tienden helder. Deze kleur tegen zuiver wit controleren met de contrasttool levert een verhouding op van rond 7,39, wat AAA (7,0) haalt voor normale tekst en AAA (4,5) voor grote tekst — een sterke, toegankelijke voorgrondkeuze. #663399 heen en weer converteren via RGB → HSL → RGB → HEX levert exact de oorspronkelijke string op, byte voor byte.

Gebruik deze converter als snelle referentie voor elke kleur die je tegenkomt — in code, in ontwerpbestanden of in een schermafbeelding — en de contrastchecker als sanity check vóór uitlevering. Alles draait lokaal, er wordt niets gelogd, en de conversiewiskunde volgt de gepubliceerde W3C- en WCAG-specificaties zodat de cijfers overeenkomen met wat je audittool of browser-devtools zouden rapporteren.