HEX naar HSL Converter

Wat deze pagina doet

Deze pagina zet een hexadecimale kleurcode — zes cijfers zoals #1E90FF of de korte versie van drie cijfers zoals #abc — direct om naar de overeenkomstige HSL-waarde. De uitvoer toont hue in graden (0–360), verzadiging en lichtheid beide als percentages (0–100%). Tegelijkertijd verschijnt de kleur ook in alle andere ondersteunde notaties: HEX, RGB, HSV, CMYK en LAB. Zodra je de hex-code aanpast, worden alle velden gelijktijdig bijgewerkt. De conversie gebeurt volledig in je browser; er wordt niets naar een server gestuurd.

De tool accepteert alleen geldige hex-codes. Voer je iets in dat geen zes cijfers of drie cijfers is (met of zonder het #-teken), dan verschijnt de foutmelding: Voer een hex-kleur in zoals #4f46e5 of #abc. CMYK-waarden zijn een schatting voor het scherm en zijn niet geschikt voor professioneel drukwerk zonder kalibratie.

HEX versus HSL – waarom deze omzetting nodig is

HEX is een compacte manier om RGB-waarden in basis 16 weer te geven. Een zescijferige code zoals #4f46e5 splitst in drie componenten: rood 4f (79 in decimaal), groen 46 (70) en blauw e5 (229). De driecijferige shorthand zoals #abc staat eigenlijk voor #aabbcc — elke hex wordt verdubbeld. Dit is handig voor CSS en ontwerptools, maar het is lastig om in je hoofd aanpassingen te doen. Wil je een tint donkerder maken, dan moet je alle drie de componenten in de juiste verhouding verlagen.

HSL is gebouwd voor menselijke intuïtie. Hue is de plaats op een kleurenwiel (0° = rood, 120° = groen, 240° = blauw). Verzadiging is de intensiteit van de kleur: 0% is grijs, 100% is pure tint. Lichtheid gaat van 0% (zwart) tot 100% (wit). Door bijvoorbeeld alleen de lichtheid te verhogen maak je een tint lichter zonder dat de hue of verzadiging verandert. Dat maakt HSL ideaal voor het genereren van kleurpaletten, themavarianten en toegankelijkheidsaanpassingen.

Standaard HEX heeft geen alpha-kanaal; de conversie naar HSL houdt dat ook niet bij. Alle kleuren worden als volledig dekkend beschouwd.

Hoe de omrekening werkt – van hex naar HSL

De pagina zet eerst de hex-code om naar RGB-decimaal. Voor een code als #4f46e5:

• Rood: 4f = 4 × 16 + 15 = 79
• Groen: 46 = 4 × 16 + 6 = 70
• Blauw: e5 = 14 × 16 + 5 = 229

Vervolgens worden deze waarden genormaliseerd naar een schaal van 0 tot 1 (delen door 255). De eigenlijke conversie naar HSL volgt een vaste wiskundige omzetting:

1. Bepaal het maximum (M) en minimum (m) van de drie genormaliseerde waarden.
2. De lichtheid L = (M + m) / 2.
3. Als M gelijk is aan m, is de kleur grijs: verzadiging = 0% en hue is ongedefinieerd (soms als 0° genoteerd).
4. Anders: verzadiging = (M − m) / (1 − |2L − 1|), uitgedrukt in procenten.
5. Hue wordt berekend op basis van welk component het maximum is, met een formule die afhangt van de relatieve posities van de componenten. Het resultaat wordt genormaliseerd naar een getal tussen 0° en 360°.

Voorbeeld voor #4f46e5 (genormaliseerd: R=0,310, G=0,275, B=0,898): M=0,898 (blauw), m=0,275.
L = (0,898+0,275)/2 = 0,5865 → 58,65%.
Verzadiging = (0,898−0,275) / (1 − |2×0,5865−1|) = 0,623 / (1 − 0,173) ≈ 0,753 → 75,3%.
Hue: omdat blauw het maximum is, geldt h = 240° + ((R−G)/(M−m)) × 60° = 240° + ((0,310−0,275)/0,623)×60° ≈ 240° + 3,4° ≈ 243,4°.

Deze wiskunde zit in de tool ingebouwd; jij ziet direct het resultaat.

Randgevallen en foutafhandeling

• Ongeldige hex-codes: alleen exact zes of drie hexadecimale cijfers worden geaccepteerd. Letters kunnen a–f zijn (hoofdletters of kleine letters, de tool werkt beide). Elke andere invoer toont de foutmelding.
• Driecijferige shorthand: de tool verdubbelt de cijfers, zodat #abc wordt behandeld als #aabbcc. Dit is de standaardinterpretatie in CSS.
• Buiten het zichtbare RGB-gamma: als je schakelt naar een andere kleurruimte (bijv. LAB of CMYK) en een kleur invoert die op het scherm niet exact weergegeven kan worden, wordt de kleur aangepast naar de dichtstbijzijnde weergavekleur. De terugconversie naar hex kan daardoor een lichte afwijking geven. Dit is inherent aan de beperking van het RGB-gamma.
• CMYK is een schatting: de omzetting van RGB naar CMYK is niet uniek; de tool gebruikt een standaard conversie zonder ICC-profiel. Gebruik de uitvoer niet voor drukwerk zonder voorafgaande kalibratie.
• Geen alpha-ondersteuning: zowel HEX (zonder alpha) als HSL gaan uit van volledige dekking. Wil je transparantie, dan moet je een andere notatie gebruiken, zoals rgba() of hsla().

Voor wie is deze tool bedoeld

• Front-end ontwikkelaars die CSS schrijven en een hex-kleur uit een ontwerp willen omzetten naar HSL. Door alleen de lichtheid aan te passen maak je eenvoudig hover-effecten of themavarianten, zonder dat de tint verschuift.
• UI/UX-ontwerpers die in HSL denken en een merkkleur in hex krijgen aangeleverd. Met HSL kunnen ze snel varianten produceren door de verzadiging of lichtheid te wijzigen.
• Iedereen die kleurenpaletten bouwt: HSL maakt het simpel om complementaire, analoge of monochromatische schema’s te genereren door alleen de hue of verzadiging te verschuiven.
• Webtoegankelijkheidsauditors die contrastverhoudingen moeten controleren. HSL maakt het makkelijker om in te schatten of een kleur voldoende contrast biedt, omdat je de lichtheid direct ziet.

Veelgestelde vragen

1. Wat is het verschil tussen HSL en HSV/HSB?
Beide gebruiken een hue in graden, maar de derde component verschilt. In HSL is de L‑as (lichtheid) symmetrisch: 0% is zwart, 100% is wit, 50% is de pure tint. In HSV (ook wel HSB genoemd) staat V voor helderheid: 0% is zwart, 100% is de maximale helderheid van de tint, en wit is alleen te bereiken door de verzadiging op 0% te zetten. De tool toont beide notaties naast elkaar.

2. Kan ik een hex-code zonder #-teken invoeren?
Ja. Zowel #4f46e5 als 4f46e5 werkt. De tool negeert het hekje.

3. Wat gebeurt er als ik een ongeldige hex-code intyp, zoals #GGG?
De tool toont de foutmelding Voer een hex-kleur in zoals #4f46e5 of #abc. De velden worden niet bijgewerkt.

4. Waarom wijkt de CMYK-waarde af van wat ik in een drukprogramma zie?
De CMYK-waarde is een schermschatting op basis van een algemene RGB‑naar‑CMYK‑conversie zonder ICC‑profiel. Drukwerk vereist een profiel dat rekening houdt met papier, inkt en printer. Gebruik deze waarde alleen voor orientatie.

5. Werkt de tool ook met alpha (transparantie)?
Nee. De pagina accepteert alleen zes- of driecijferige hex zonder alpha (dus geen #RRGGBBAA). HSL heeft van zichzelf geen alpha-component. Wil je transparantie, dan kun je de HSL-waarde overnemen en in CSS gebruiken met hsla(hue, saturation%, lightness%, alpha).

6. Verandert de tool de ingevoerde hex-code als die buiten het RGB-gamma valt?
De tool converteert eerst altijd naar RGB. Omdat hex per definitie een geldig RGB‑geheel getal oplevert, kan een geldige hex nooit buiten het RGB-gamma vallen. Als je echter overschakelt naar een andere kleurruimte en daar een waarde invoert die niet in RGB weergegeven kan worden, dan wordt die kleur aangepast. De terugconversie naar hex kan dan een lichte verschuiving geven. Dit zie je terug in de uitvoer.