HSL naar HEX Converter

HSL naar HEX: directe, verliesloze omzetting in je browser

Wat deze pagina doet

Je voert een HSL-kleur in – tint in graden (0–360), verzadiging als percentage en lichtheid als percentage – en deze pagina toont onmiddellijk het equivalente hexadecimale (HEX) kleurcodering. De HEX-code is de zescijferige (of driecijferige verkorte) notatie die overal in CSS en ontwerpgereedschap wordt gebruikt, zoals #1E90FF. Terwijl je typt of een kleur kiest, wordt de HEX-waarde direct bijgewerkt.

Om precies te zijn: de invoer verwacht een notatie zoals 243, 75%, 59%. De pagina parseert dit, berekent de RGB-waarden en produceert de HEX-code. Naast HEX worden ook de andere kleurvelden (RGB, HSV, CMYK, LAB) gelijktijdig vernieuwd. Alle verwerking gebeurt lokaal in je browser; er wordt niets geüpload.

Wat deze pagina onderscheidt

Deze pagina is specifiek gebouwd voor de conversie HSL → HEX. Dat klinkt eenvoudig, maar de keuze voor deze twee kleurmodellen is niet toevallig. HSL (Hue, Saturation, Lightness) is ontworpen voor menselijk redeneren over kleur. Door alleen de lichtheid te wijzigen blijft de tint intact – ideaal voor paletgeneratie en thema‑ontwerp. HEX daarentegen is een zescijferige (of driecijferige verkorte) RGB‑notatie; het draagt geen alfakanaal, tenzij de achtcijferige vorm wordt gebruikt.

De conversie is rechtstreeks en verliesloos binnen het sRGB‑gamma. Anders dan omzettingen via LAB of CMYK – die out‑of‑gamut kleuren kunnen aanpassen – blijft HSL‑naar‑HEX volledig binnen het zichtbare RGB‑bereik. Dit maakt de berekening eenvoudig en voorspelbaar, zonder verrassingen.

Invoer en uitvoer

Invoerformaat

Het percentage‑teken (%) is verplicht. Een notatie zonder % wordt niet geaccepteerd. De velden kunnen in elke volgorde worden ingevuld, zolang het formaat overeenkomt.

Uitvoer

• Primair: HEX-code in zescijferige vorm, bijvoorbeeld #4f46e5.
• Optioneel verkort: Als elk van de RGB‑kanalen met een enkel hexadecimaal cijfer kan worden weergegeven, toont de pagina ook de driecijferige verkorte vorm, zoals #abc. Dit gebeurt alleen wanneer de waarden identiek zijn (bijvoorbeeld #aabbcc wordt #abc).
• Andere kleurvelden: RGB, HSV, CMYK en LAB worden tegelijk bijgewerkt. Let op: de CMYK‑waarde is een schatting op het scherm en kan afwijken van professionele drukwaarden.

Regels en randgevallen

Directe bijwerking: Bewerk je een van de velden? Dan worden alle andere velden onmiddellijk herberekend. Er is geen aparte knop nodig.

Foutmelding bij ongeldige invoer: Als de HSL‑waarden buiten de geldige bereiken vallen (tint 0–360, verzadiging 0–100%, lichtheid 0–100%) of niet correct zijn opgemaakt, verschijnt het foutbericht:

Voer HSL in als tint 0–360 met twee percentages, zoals 243, 75%, 59%.

Bereik en gamma: De conversie van HSL naar HEX blijft altijd binnen het zichtbare RGB‑bereik. Er vindt geen out‑of‑gamut‑correctie plaats voor deze omzetting – dat is een voordeel ten opzichte van complexere kleurruimten.

Privacy: Alle verwerking gebeurt direct in je browser. Geen enkele invoer wordt naar een server gestuurd; de pagina werkt volledig offline eenmaal geladen.

Voor wie is deze pagina?

• Ontwerpers die kleurenpaletten in HSL bouwen en de HEX‑codes nodig hebben voor implementatie in code of ontwerpgereedschap.
• Front‑end ontwikkelaars die HSL‑waarden uit designfiles (bijvoorbeeld Figma, Sketch) ontvangen en deze moeten omzetten naar CSS HEX‑eigenschappen.
• Iedereen die thema’s aanpast of toegankelijkheidscontrasten berekent door de lichtheid in HSL aan te passen en het resultaat om te zetten naar een HEX‑waarde voor productie.

De praktijk: stel dat je een kleurenschema maakt voor een donkere modus. Je verlaagt de lichtheid van een accenta, terwijl de tint intact blijft. Daarna heb je de exacte HEX nodig voor in je stylesheet. Deze pagina levert die in één keer.

Achtergrond: hoe HSL naar HEX wordt berekend

De conversie verloopt in twee stappen: eerst van HSL naar RGB, vervolgens van RGB naar HEX.

Stap 1: HSL → RGB

Hoewel je de formule niet handmatig hoeft in te vullen, is het goed te begrijpen. De standaardmethode:

1. Genormaliseerde waarden: H wordt gedeeld door 360, S en L worden gedeeld door 100.
2. Bepaal de chroma: C = (1 - |2L - 1|) × S
3. Bereken de tussentint: H' = H / 60, X = C × (1 - |H' mod 2 - 1|)
4. Wijs RGB‑componenten toe per sextant van H'.
5. Voeg lichtheid toe: m = L - C/2. R = (R' + m) × 255, G = (G' + m) × 255, B = (B' + m) × 255.

Deze rekenmethode is gestandaardiseerd en verliesloos binnen het sRGB‑gamma.

Stap 2: RGB → HEX

Elke RGB‑component (0–255) wordt omgezet naar twee hexadecimale cijfers (00–FF). Bijvoorbeeld:

• R=79, G=70, B=229 → 4F, 46, E5 → #4F46E5 (hoofdletterongevoelig in de praktijk).
• De driecijferige verkorte vorm is alleen mogelijk als elk kanaal een herhaald cijfer heeft, zoals F voor 255 en F voor 15? Nee, dat klopt niet: #1E9 zou staan voor #11EE99. De regel: als de hexadecimale waarde van elk kanaal uit twee identieke cijfers bestaat, mag één cijfer worden gebruikt. Bijvoorbeeld #aabbcc wordt #abc, maar #1E90FF kan niet worden verkort omdat 1E, 90, FF geen identieke paren zijn.

Veelgestelde vragen

1. Waarom wordt er een foutmelding getoond als ik geen %‑tekens gebruik?

De parser verwacht percentages zoals 75% en 59%. Zonder het %‑teken kan de pagina niet onderscheiden of je 75 als 75% of als een andere eenheid bedoelt. Het formaat is strikt: tint, verzadiging%, lichtheid%.

2. Kan ik met deze pagina HSL‑kleuren met alfakanaal omzetten?

Nee. HSL kent geen standaard alfakanaal in de driedelige notatie. Voor alpha heb je HSLA (Hue, Saturation, Lightness, Alpha) nodig, maar deze pagina ondersteunt alleen de basis HSL. HEX kan in achtcijferige vorm alpha bevatten, maar die conversie wordt hier niet geboden. Gebruik voor HSLA→HEXA een aparte tool.

3. Werkt de pagina offline?

Ja, zodra de pagina eenmaal is geladen, vindt alle verwerking lokaal in de browser plaats. Er is geen internetverbinding nodig voor de berekeningen.

4. Waarom wijkt de getoonde CMYK‑waarde af van drukkerij‑CMYK?

CMYK op het scherm is een simulatie op basis van een specifiek ICC‑profiel (vaak sRGB‑gebaseerd). Professionele drukkerijen gebruiken eigen profielen, papier‑ en inktsoorten. Gebruik de getoonde CMYK altijd als indicatie, niet als eindwaarde voor drukwerk.

5. Is de conversie van HSL naar HEX altijd mogelijk?

Binnen de grenzen van sRGB is de conversie altijd mogelijk en verliesloos. Omdat HSL inherent is afgeleid van RGB, valt elke geldige HSL‑combinatie binnen het RGB‑bereik. Er is dus geen out‑of‑gamut‑probleem, in tegenstelling tot conversies naar Lab of CMYK.

6. Kan ik ook de omgekeerde omzetting (HEX naar HSL) doen op deze pagina?

Nee, deze pagina is specifiek voor HSL→HEX. Er is een aparte pagina voor HEX→HSL op dezelfde site. Gebruik die als je de andere richting nodig hebt.

Tot slot

Of je nu een kleurenschema genereert, een contrastcontrole uitvoert of een design naar code vertaalt: de directe, browsergebaseerde conversie van HSL naar HEX bespaart tijd en vermijdt rekenfouten. De pagina is gemaakt voor één taak – en die taak doet hij zonder ruis.