Converteer elke hex-kleur naar HSL in je browser — 3-cijferig, 6-cijferig en 8-cijferig hex met alpha worden allemaal ondersteund. Gratis, direct, geen account, je kleuren verlaten de pagina nooit.
Tints
Shades
Tones
Harmonies
— — — — — Een hex naar HSL converter is een klein hulpmiddel dat een hex-kleurcode (`#3b82f6`) omzet in de cilindrische Hue / Saturation / Lightness-triple die dezelfde sRGB-kleur codeert (`hsl(217 91% 60%)`). Hex-codes zijn de beknopte grondtal-16-string die designers en developers tussen Figma, Sketch, Photoshop, brand-guidelines-PDF's en CSS-stylesheets plakken — drie 8-bit channels gepakt in een 6-tekens `#RRGGBB`-vorm, verankerd aan de sRGB-kleurruimte gedefinieerd door IEC 61966-2-1 in 1996. HSL is een cilindrische hervorming van diezelfde kleurruimte op drie meer designer-vriendelijke assen: een hue-hoek op het kleurenwiel, een chromatisch saturation-procent en een lightness-procent. Developers converteren HEX → HSL voortdurend: om een merkkleur als CSS-variabele te definiëren en daarna lichtere of donkerdere tinten te componeren door alleen L aan te passen, om een color-picker-UI te voeden die Hue en SL als aparte controls toont, om tint- en schaduw-ramps voor een design system te genereren, of om runtime CSS-variabele-wiskunde uit te voeren via `hsl(from var(--primary) h s calc(l + 10%))` voor afgeleide thema-tokens. Deze tool draait de conversie live terwijl je typt, zonder "Converteren"-knop om op te klikken, en toont elk ander gangbaar kleurformaat (RGB, OKLCH, OKLAB, HSV, HWB, CMYK, plus de 148 CSS named colors) gratis naast de HSL-uitvoer.
**Het HSL-formaat zelf verdient nadere beschouwing.** HSL = Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Hue is hoekpositie op het kleurenwiel — 0° is rood, 60° is geel, 120° is groen, 180° is cyaan, 240° is blauw, 300° is magenta, en 360° wrapt terug naar rood. Saturation is chromatische intensiteit van 0% (achromatisch grijs) tot 100% (volledig chromatisch zonder grijsinhoud). Lightness is helderheid van 0% (puur zwart, ongeacht hue of saturation) via 50% (de pure kleurtoon op vol chroma) tot 100% (puur wit, ongeacht hue of saturation). Alvy Ray Smith publiceerde de oorspronkelijke afleiding in 1978 als onderdeel van de vroege computer-graphics-push om designers coördinatensystemen te geven die dichter bij hun cognitieve kleurmodel lagen dan ruwe RGB-channel-adressering. Het model zit sinds CSS3 (2010) in CSS en shipt in elke browser terug tot IE 9. De originele CSS-syntax gebruikte komma's: `hsl(217, 91%, 60%)` voor dekkend, `hsla(217, 91%, 60%, 0.5)` voor alpha. CSS Color 4 (W3C Candidate Recommendation sinds 2022) voegde een moderne ruimte-gescheiden vorm toe: `hsl(217 91% 60%)` en `hsl(217 91% 60% / 0.5)` met slash-voorvoegde alpha — dezelfde syntactische vorm als de andere functionele notaties van CSS Color 4 (`rgb()`, `lab()`, `oklch()`, `color()`). Hue kan ook in turns (`hsl(0.6turn 91% 60%)`) of radians (`hsl(3.787rad 91% 60%)`) worden uitgedrukt, allemaal equivalent aan de canonieke graden-vorm. Elke evergreen-browser parset elke syntactische smaak; de tool emit standaard de moderne ruimte-gescheiden vorm.
De conversie-wiskunde gaat schoon in beide richtingen. **HEX → HSL** is een tweestaps-pipeline. Eerst, parse de 6-cijferige hex `#RRGGBB` als drie 2-cijferige grondtal-16-getallen via `parseInt(hex.slice(1, 3), 16)` enz. om integer-RGB-channels in 0-255 te krijgen. Tweede, normaliseer elke channel naar 0-1 door te delen door 255, en bereken daarna `max = Math.max(r, g, b)`, `min = Math.min(r, g, b)`, `delta = max - min`. Lightness is het gemiddelde van max en min: `L = (max + min) / 2`. Saturation is voorwaardelijk op lightness: als L ≤ 0,5, `S = delta / (max + min)`; als L > 0,5, `S = delta / (2 - max - min)`. Equivalent in de CSS Color 4 §6.4-vorm, `S = delta / (1 - |2L - 1|)` (met S = 0 als delta = 0). Hue is stukgewijs op welke channel het maximum is: als R het max is, `H = ((G - B) / delta) % 6`; als G het max is, `H = (B - R) / delta + 2`; als B het max is, `H = (R - G) / delta + 4`; vermenigvuldig met 60 om naar graden te schalen, tel 360 erbij op als negatief. De inverse (HSL → HEX, via RGB) gebruikt de helper `f(n) = L - a * max(-1, min(k-3, 9-k, 1))` waarbij `a = S * min(L, 1-L)` en `k = (n + H/30) mod 12`, toegepast met n = 0, 8, 4 om respectievelijk R, G, B te produceren, dan geschaald naar 0-255 en hex-gecodeerd.
**Waarom HSL nog steeds nuttig is.** Intuïtieve sliders — L aanpassen maakt voorspelbaar lichter of donkerder zonder de kleurtoon-identiteit te breken, terwijl een RGB-channel aanpassen een minder voorspelbare kleurverschuiving produceert. Runtime CSS-wiskunde — moderne browsers ondersteunen `hsl(from var(--primary) h s calc(l + 10%))` om thema-tokens bij rendertijd af te leiden. Designer-cognitie — designers opgegroeid met HSV-color-pickers redeneren in hue + chroma-termen over kleur, ook als het bestand in hex shipt. **HSL's probleem** is dat zijn Lightness-as niet perceptueel uniform is — een groen op L=50% oogt zichtbaar helderder dan een blauw op L=50% omdat HSL de gamma-eigenaardigheden van sRGB erft en elke kleurtoon als equivalent op de L-schaal behandelt. Wanneer je perceptuele uniformiteit nodig hebt (paletgeneratie waar elke stap even helder moet ogen, dark-mode-token-berekening die niet per ongeluk blauwe tekst moeilijker leesbaar maakt dan groene tekst), grijp je naar OKLCH — dezelfde tool toont beide, dus de keuze is één oogopslag verwijderd.
Deze tool's HEX → HSL-workflow is één richting van een 5-spoke-familie die allemaal dezelfde onderliggende unified color converter delen. De aparte unified color converter is de hub — hij toont alle 9 formaten tegelijk bewerkbaar en is de juiste tool wanneer je workflow meer dan alleen hex en HSL nodig heeft. De eenrichtings-spokes richten zich op specifieke Google-zoekintenties: de hex naar RGB converter voor de canvas-en-hardware-richting, de RGB naar hex converter voor de inverse, de hex naar OKLCH converter voor moderne perceptueel-uniforme design systems (Tailwind v4 en shadcn defaulten nu allebei naar OKLCH), en de hex naar CMYK converter voor printvoorbereidings-benaderingen. Alle vijf spokes en de hub delen dezelfde parsing engine en dezelfde conversie-wiskunde, dus de resultaten zijn gegarandeerd identiek over de familie. Elke conversie draait lokaal in je browser — je hex-codes worden nooit geüpload, nooit gelogd, en nul netwerkverzoeken vuren terwijl je typt. Verifieer in DevTools.
// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
let h = input.trim().replace(/^#/, '');
if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
const r = parseInt(h.slice(0, 2), 16) / 255;
const g = parseInt(h.slice(2, 4), 16) / 255;
const b = parseInt(h.slice(4, 6), 16) / 255;
const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
const L = (max + min) / 2;
const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
let H = 0;
if (delta !== 0) {
if (max === r) H = ((g - b) / delta) % 6;
else if (max === g) H = (b - r) / delta + 2;
else H = (r - g) / delta + 4;
H = (H * 60 + 360) % 360;
}
return { h: H, s: S, l: L, alpha };
}
console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 } 3-cijferig `#F73`, 4-cijferig alpha `#F738`, 6-cijferig `#3b82f6`, 8-cijferig alpha `#FF573380`, plus de variant zonder `#` voor elk daarvan. De parser normaliseert ze allemaal naar dezelfde interne kleur voordat hij HSL afleidt, zodat je elke vorm kunt plakken die je bron gebruikt zonder eerst handmatig de verkorte vorm uit te breiden. Hoofdletters worden ook genormaliseerd — `#3b82f6` en `#3B82F6` produceren identieke HSL-uitvoer.
Het HSL-veld toont de waarde in de moderne vorm van CSS Color 4: `hsl(217 91% 60%)` voor dekkende kleuren, `hsl(217 91% 60% / 0.5)` voor kleuren met alpha. Beide vormen werken in elke evergreen-browser (Chrome 65+, Safari 13+, Firefox 52+). De legacy-kommavorm `hsl(217, 91%, 60%)` is één mechanische replace verwijderd als je doel het nodig heeft; de moderne syntax heeft de voorkeur in nieuwe code omdat hij aansluit bij de andere functionele syntaxen van CSS Color 4.
Hoewel deze spoke specifiek HEX → HSL target, houdt de gedeelde onderliggende converter de canonieke kleur intern aan als OKLCH-triple. Dit betekent dat HEX → HSL → RGB → OKLAB → HEX round-trips verlopen zonder per-stap float-drift; legacy-converters die via HSL als pivot routen stapelen afrondingsfouten op en kunnen de hue over enkele conversies meerdere graden laten driften. OKLCH-pivot houdt elk ander formaat wiskundig verankerd aan hetzelfde bronpunt.
8-cijferige en 4-cijferige hex met alpha (`#RRGGBBAA` en `#RGBA`) worden correct geparseerd. Het laatste paar mapt op een 0-1 alpha-float: `00` → 0, `80` → 0,502, `FF` → 1. De uitvoer gebruikt standaard de slash-syntax van CSS Color 4 (`hsl(217 91% 60% / 0.5)`); de legacy-vorm `hsla(217, 91%, 60%, 0.5)` is één replace verwijderd. Handig bij migratie van design-tokens waar alpha-waarden mogelijk in 8-cijferige hex-codes verborgen zijn.
Dezelfde hex die je plakt drijft ook RGB, HSV, HWB, OKLCH, OKLAB, CMYK en de dichtstbijzijnde CSS named color — allemaal in één oogopslag op dezelfde pagina zichtbaar. Je zit nooit alleen vast aan hex → HSL. Als een teamgenoot de OKLCH-triple nodig heeft voor een Tailwind v4-token (waar perceptuele uniformiteit zwaarder weegt dan HSL's gamma-eigenaardige L), de dichtstbijzijnde named color voor documentatie-proza, of de RGB-tuple voor een canvas-aanroep, staan de waarden er al met hun eigen Kopiëren-knoppen.
Geef een hex door en de contrastrij scoort hem direct tegen zowel wit als zwart via WCAG 2.1 (regelgevende ondergrens: 4,5:1 voor lopende tekst, 7:1 voor AAA) en APCA Lc (voorgestelde WCAG 3-opvolger: target `|Lc| ≥ 75` voor lopende tekst). Handig als je net een merk-hex naar HSL hebt geconverteerd en wilt verifiëren dat de resulterende kleur (of een lightness-aangepaste variant) echt leesbaar is als kleur voor lopende tekst voor je 'm ship.
Onder de picker zet de sectie Copy as code de huidige kleur om in plak-klare snippets voor vijf platforms: CSS custom property (`--color-brand: hsl(217 91% 60%)`), Tailwind v4 `@theme`-token, SwiftUI `Color(hue:saturation:brightness:)`-literal, Jetpack Compose `Color.hsl(217f, 0.91f, 0.60f)`-constante, Flutter `HSLColor.fromAHSL(...)`. De exacte syntax die elk platform verwacht, klaar om te droppen in een iOS-asset catalog, Android-themabestand of Flutter `ThemeData`.
Alle hex-parsing, HSL-conversie, contrastscoring en paletgeneratie draait lokaal in je browser. Je hex-codes worden nooit verzonden, nooit gelogd op een server, nooit geanalyseerd. Nul netwerkverzoeken terwijl je typt — verifieer in DevTools. Veilig voor onaangekondigde merkpaletten, interne design tokens, concept-mockups onder NDA, en al het andere vertrouwelijke kleurwerk.
De huidige kleur codeert automatisch in de URL-hash als `#hex=3b82f6` bij elke wijziging. Kopieer de URL, plak in een Slack-thread of een GitHub-issue, en iedereen die hem opent landt op dezelfde hex met dezelfde HSL-triple. De hash leeft alleen in je adresbalk en wordt nooit naar de server verzonden (browsers nemen URL-fragmenten niet op in HTTP-verzoeken), dus zelfs het delen van de link lekt de kleur niet naar enige derde partij.
Het standaard-Google-resultaat voor "hex to hsl" — een eenrichtings-formulier met hex erin, HSL eruit, geen andere formaten zichtbaar. Handig voor eenmalige opzoekingen wanneer je vanuit zoekresultaten arriveert. Mist OKLCH, contrastchecking, gamutdetectie, alpha-afhandeling en de multi-formaat simultane weergave. Deze tool wint op elke as behalve het bare-bones eenmalige-conversie-geval.
Langlopende per-kleur SEO-pagina's met diepe metadata: conversies, paletten, harmonies, gradients voor elke hex die je opvraagt. UI is gedateerd (begin jaren 2010), geen OKLCH-ondersteuning, geen APCA-contrast, geen wide-gamut-afhandeling. Sterk voor SEO-vondsten van een specifieke hex via Google; zwakker voor actieve conversie-workflows waar typen in een unified-field-UX sneller is.
Beginnervriendelijke HEX/RGB/HSL-toggle op een onderwijs-georiënteerde pagina, alomtegenwoordig in zoekresultaten. Geen OKLCH, geen alpha-afhandeling buiten hsla, geen geavanceerde features. Handig als referentie naast W3Schools' uitleg-content. Deze tool wint op elke andere as: meer formaten, perceptuele wiskunde, gamut + contrast + CVD-features, moderne code-export voor Tailwind v4 / SwiftUI / Compose / Flutter.
Chrome, Firefox en Safari DevTools shippen allemaal een color picker die schakelt tussen HEX, RGB en HSL inline als je op een kleurstaal in het CSS-paneel klikt. Gratis, geen installatie, altijd beschikbaar. Mist OKLCH, mist deelbare URL's, mist code-export voor niet-webplatforms (SwiftUI, Compose). Pak DevTools als je al CSS debugt; pak deze tool als je cross-platform-uitvoer nodig hebt.
Een gefocuste HSL-picker met live hue/saturation/lightness-sliders en een hex-uitvoer. Minimale UI, goed voor snelle HSL-exploratie. Mist OKLCH en de bredere formaatgrid; geen contrast- of gamutfeatures. Handig als gefocuste HSL-only tool; deze tool dekt dezelfde workflow plus 8 andere formaatweergaven en de perceptuele checks.
Per-kleur SEO-pagina's met veel ruimtes (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Mist moderne OKLCH-ondersteuning en de unified-field-bewerkings-UX. Auto-gegenereerde contentpagina's voelen contentfarm-achtig aan, maar de conversiedata is correct. Goed voor het verkennen van individuele kleurmetadata via Google; deze tool is sneller voor actieve workflows.
#3b82f6
HSL-uitvoer: `hsl(217 91% 60%)`. De canonieke workflow voor een design system gebouwd op HSL: definieer het merk één keer als `--primary: hsl(217 91% 60%)`, en componeer lichtere tinten door alleen het L-percentage aan te passen — `hsl(217 91% 70%)` voor een hover-tint, `hsl(217 91% 80%)` voor een disabled-state, `hsl(217 91% 90%)` voor een subtiele achtergrondvulling. Hue en saturation blijven vergrendeld, dus de familie leest als een coherente ramp. RGB-gebaseerde stylesheets vereisen drie gecoördineerde channel-aanpassingen per stap; HSL heeft er één nodig.
#FF5733
HSL-uitvoer: `hsl(11 100% 60%)`. Designers die in termen van hue + saturation + lightness redeneren (het cognitieve model dat Munsell in 1905 formaliseerde) willen vaak de HSL-triple, ook als het bronbestand in hex shipt. Hue = 11° plaatst dit aan de rode kant van de oranje wig; saturation = 100% betekent dat het kanaal volledig chromatisch is; lightness = 60% zit een stukje boven het middelpunt. Eén keer de Figma-hex plakken produceert de matchende HSL, klaar om in te dropen in de mentale picker van de designer zonder handmatig kleurenwiel-gokken.
#3b82f6
HSL-uitvoer: `hsl(217 91% 60%)`. Met de HSL-triple in de hand is het genereren van een tint-ramp een eendimensionale sweep: pivot L naar 70% voor `hsl(217 91% 70%)`, 80% voor `hsl(217 91% 80%)`, 90% voor `hsl(217 91% 90%)` om richting wit te klimmen; verlaag naar 50%, 40%, 30% voor donkere schaduwen. De hele 9-staps-ramp komt voort uit het wijzigen van één getal. Tints en schaduwen blijven tonaal gerelateerd omdat hue en saturation constant blijven — de truc die legacy design systems gebruikten voordat OKLCH perceptueel-uniforme ramps goedkoop maakte.
#FF573380
HSL-uitvoer: `hsl(11 100% 60% / 0.5)`. Het laatste paar (`80`) decodeert als `128/255 ≈ 0.502`, weergegeven als de alpha-channel via de slash-syntax van CSS Color 4. De equivalente legacy-vorm is `hsla(11, 100%, 60%, 0.5)`, die sinds IE 9 in elke browser werd ondersteund en die oudere preprocessors verwachten. 8-cijferige hex met alpha kwam in 2018 native in alle evergreen-browsers; daarvoor moest alpha expliciet via de `hsla()`-functie komen.
Referentietabel van de 10 meest-geconverteerde hex-codes en hun HSL-equivalenten — pure primaire kleuren, pure secundaire kleuren, en twee echte merkkleuren uit het Tailwind-palet.
Puur zwart. Lightness op 0% — de afwezigheid van uitgezonden licht. Hue en saturation zijn conventioneel 0 voor grijzen.
#000000 → hsl(0 0% 0%) Puur zwart op een scherm is zelden de juiste designkeuze — probeer `hsl(0 0% 7%)` of OKLCH-lightness 0,1-0,15 voor zachtere lopende tekst.
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Puur wit. Lightness op 100% — de helderste mogelijke sRGB-kleur. Hue en saturation zijn conventioneel 0 voor grijzen.
#FFFFFF → hsl(0 0% 100%) Puur witte achtergronden kunnen oogvermoeidheid produceren in donkere omgevingen — probeer `hsl(0 0% 98%)` of OKLCH 0,98 voor warmere alternatieven.
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Puur rood. Hue op 0° (de beginpositie van het wiel), saturation volledig chromatisch, lightness op het middelpunt waar pure kleurtonen zitten.
#FF0000 → hsl(0 100% 50%) Puur rood is sterk verzadigd en past zelden in een merkpalet — de meeste "rode" merkkleuren liggen dichter bij `hsl(0 73% 50%)` (#DC2626).
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Puur groen. Hue op 120° (een derde rond het wiel), saturation volledig chromatisch, lightness op 50%. CSS named color `lime`.
#00FF00 → hsl(120 100% 50%) Het CSS-keyword `green` lost op naar #008000 (hsl(120 100% 25%)), niet #00FF00 — een veelvoorkomende bron van verwarring. Gebruik `lime` voor puur hsl(120 100% 50%).
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Puur blauw. Hue op 240° (twee derde rond het wiel), saturation volledig chromatisch, lightness op het middelpunt.
#0000FF → hsl(240 100% 50%) Puur blauw op een witte achtergrond haalt WCAG AA-contrast niet (3,7:1) — overweeg `hsl(224 76% 48%)` (Tailwind blue-700) voor lopende tekst.
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Cyaan. Hue op 180° (het middelpunt van het wiel, tegenover rood), saturation volledig chromatisch, lightness op het pure-kleurtoon-middelpunt. CSS named color `cyan` of `aqua`.
#00FFFF → hsl(180 100% 50%) Cyaan zit tegenover rood op het wiel (180°/0°), wat het de natuurlijke complementaire harmoniepartner maakt voor elke merkkleur uit de rode familie.
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Magenta. Hue op 300° (vijf zesde rond het wiel), saturation volledig chromatisch, lightness op het pure-kleurtoon-middelpunt. CSS named color `magenta` of `fuchsia`.
#FF00FF → hsl(300 100% 50%) Magenta zit tegenover groen op het wiel (300°/120°), wat het de natuurlijke complementaire harmoniepartner maakt voor elke merkkleur uit de groene familie.
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Geel. Hue op 60° (een zesde rond het wiel, tussen rood en groen), saturation volledig chromatisch, lightness op het pure-kleurtoon-middelpunt.
#FFFF00 → hsl(60 100% 50%) Geel op hsl(60 100% 50%) oogt veel helderder dan rood op hsl(0 100% 50%) — een levendig voorbeeld van HSL's perceptuele niet-uniformiteit. OKLCH normaliseert dit.
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Tailwind CSS's standaard blue-500-merkkleur — het canonieke "webblauw" van midden jaren 2020. Gebruikt in talloze dashboards, marketingsites en admin-tools.
#3b82f6 → hsl(217 91% 60%) Tailwind v4 herdefinieert blue-500 in OKLCH (`oklch(0.629 0.193 263.4)`) voor perceptueel-uniforme ramps — HSL is de v3-fallback.
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Tailwind CSS's standaard rose-500 — een hoog-verzadigd roze-rood dat vaak wordt gebruikt voor accentknoppen, alert-states en merkcontrast.
#f43f5e → hsl(350 89% 60%) Rose-500's hue (350°) zit net voor rood (0°/360°) op het wiel — een lichte rozeverschuiving die warmer leest dan puur rood.
Perceptueel-uniforme uitvoer nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter — elke L-stap oogt even helder over kleurtonen, in tegenstelling tot HSL.
Drop elke hex-waarde in het HEX-invoerveld — met of zonder de leidende `#`, in 3-cijferige verkorte vorm (`#F73`), 6-cijferige volledige vorm (`#3b82f6`), 4-cijferige alpha-verkorte vorm (`#F738`), of 8-cijferige alpha-volledige vorm (`#FF573380`). De tool normaliseert alle vijf invoervormen intern naar dezelfde canonieke kleur. Hoofdletters maken niet uit (`#3b82f6` en `#3B82F6` parsen identiek). Ongeldige tekens of verkeerde cijferaantallen produceren een rustige inline foutmelding; geldige hex werkt elk ander formaatveld in realtime bij, inclusief HSL.
Het HSL-veld onder het HEX-veld toont de matchende `hsl()`-waarde in de moderne ruimte-gescheiden syntax van CSS Color 4: `hsl(217 91% 60%)` voor een dekkende kleur, `hsl(217 91% 60% / 0.5)` voor een kleur met alpha. Hue is een integer-graad van 0 tot 360; saturation en lightness zijn integer-procenten van 0 tot 100. De waarden worden afgerond voor weergavebaarheid — de interne OKLCH-bron van waarheid van de tool betekent dat de onderliggende precisie float is, dus round-trips terug naar hex blijven stabiel.
Elke formaatkaart heeft een Kopiëren-knop aan de rechterkant. Eén klik en de waarde belandt op je klembord — het knoplabel springt kort op "Gekopieerd!" zodat je het weet. De gekopieerde string is de canonieke CSS Color 4-syntax (`hsl(217 91% 60%)`); als je doelplatform de legacy-kommavorm nodig heeft (`hsl(217, 91%, 60%)`), is de conversie mechanisch. Voor platformspecifieke uitvoer (Tailwind v4, SwiftUI, Compose, Flutter) gebruik je de sectie Copy as code onder de picker — die snippets emitten het formaat dat elk platform native verwacht.
Dezelfde hex die je plakt licht ook de andere formaatvelden op — RGB voor canvas-aanroepen en hardware, OKLCH en OKLAB voor perceptueel-uniforme design systems, HSV en HWB voor designer-color-picker-workflows, CMYK voor printschattingen, en de dichtstbijzijnde CSS named color voor documentatie-proza. Je zit nooit alleen vast aan hex → HSL. Als je ook de OKLCH-triple nodig hebt voor een Tailwind v4 `@theme`-blok (waar perceptuele lightness zwaarder weegt dan HSL's gamma-eigenaardige L), staat die meteen in het OKLCH-veld met zijn eigen Kopiëren-knop.
Onder de formaatgrid zit een SL-vierkant + hue-slider + alpha-slider voor visuele exploratie. Het SL-vierkant mapt direct op HSL's Saturation × Lightness-vlak: sleep verticaal om L van 0% naar 100% te wandelen terwijl je het HSL-veld in realtime ziet bijwerken. Handig om visueel een tint of schaduw te genereren voordat je het exacte percentage vastlegt. Op Chromium-browsers (Chrome, Edge, Brave) activeert de EyeDropper-knop de native `EyeDropper`-API om elke pixel op het scherm te samplen, ook buiten de browser.
Een groen op `hsl(120 100% 50%)` oogt zichtbaar helderder dan een blauw op `hsl(240 100% 50%)`, ook al zitten beide op L=50%. Tint-ramps genereren door L te sweepen produceert ongelijk-ogende resultaten over kleurtonen — het lichte uiteinde van de groene ramp klimt sneller dan dat van de blauwe ramp. Dit is een structurele eigenschap van HSL die de gamma-eigenaardigheden van sRGB erft, geen bug in je code. Voor perceptueel-uniforme ramps schakel je naar OKLCH.
Sweep HSL L voor een 9-staps palet: hsl(120 100% 50%) en hsl(240 100% 50%) op dezelfde L Ogen zichtbaar verschillend in helderheid — palet voelt ongelijk.
Sweep in plaats daarvan OKLCH L: oklch(0.7 0.2 130) en oklch(0.7 0.2 250) Ogen even helder; palet leest coherent over alle kleurtonen.
HSL-hue is hoekig — `hsl(370 91% 60%)` wordt geïnterpreteerd als `hsl(10 91% 60%)` omdat 370° mod 360° = 10°. Hue animeren van 350° naar 380° wrapt schoon door 360°/0° (een dunne sliver rood), maar lineair interpoleren van H=350 naar H=10 op de verkeerde manier neemt de *lange* weg door cyaan, groen, geel — 320° omweg. Gebruik `Math.min(diff, 360 - diff)` om de korte weg te kiezen, of gebruik de ingebouwde hue-interpolatie van een kleurbibliotheek.
Lineaire interpolatie van H=350 naar H=10: (350 + 10) / 2 = 180° (cyaan-middelpunt) Fout — gaat de lange weg rond het wiel.
Korte-weg-hue-interpolatie: midpunt = ((350 + 10 + 360) / 2) % 360 = 0° (rood-middelpunt) Gaat door rood, de korte weg rond het wiel.
HSL en HSV delen de hue-as maar verschillen in hun derde as. HSL's Lightness is symmetrisch — 0% zwart, 50% pure kleurtoon, 100% wit. HSV's Value is asymmetrisch — 0% zwart, 100% pure kleurtoon, wit alleen wanneer Saturation naar 0 zakt. `hsl(0 100% 100%)` is wit; `hsv(0 100% 100%)` is puur rood. Veel kleurbibliotheken en designtools (Photoshop's HSB-picker, Sketch's kleurpaneel) gebruiken HSV — waarden tussen de twee systemen kopiëren zonder converteren produceert wild verschillende kleuren.
Plak HSV-waarden uit Photoshop in een CSS hsl()-regel: Photoshop HSB 0, 100, 100 (puur rood) CSS hsl(0 100% 100%) rendert als wit — totaal verkeerde kleur.
Converteer HSV → HSL voordat je plakt in CSS: HSV 0, 100, 100 → HSL 0, 100%, 50% CSS hsl(0 100% 50%) rendert als puur rood — correct.
HSL's S- en L-assen vereisen de `%`-suffix in CSS — `hsl(217 91 60)` is een parse-error in elke browser; de juiste vorm is `hsl(217 91% 60%)`. Alleen Hue is dimensieloos (zijn eenheid is graden, maar de suffix is optioneel). Veel ad-hoc-converters vergeten de procenttekens te emitten in hun HSL-uitvoer, wat ongeldige CSS oplevert die stilletjes faalt bij plakken. De tool emit altijd de procenttekens in het HSL-veld.
Emit HSL zonder procenttekens: hsl(217 91 60) CSS parse-error — elke browser negeert de hele regel.
Emit HSL met procenttekens op S en L: hsl(217 91% 60%) Geldige CSS — werkt in elke evergreen-browser en IE 9+.
Omrekentools
Reken je getal direct om tussen binair, hex, decimaal, octaal en elk talstelsel (2-36). Gratis en privé — alles draait in je browser.
Omrekentools
Converteer HEX naar RGB, HSL, OKLCH, OKLAB en CMYK in je browser — kopieer elk formaat met één klik. Gratis, geen account, je kleuren verlaten de pagina nooit.
Omrekentools
Converteer HEX-kleuren naar CMYK in je browser. Naïeve sRGB-gebaseerde benadering voor printvoorbeelden. Gratis, geen account, je kleuren blijven lokaal.
Omrekentools
Converteer HEX naar OKLCH voor Tailwind v4 design-tokens. Live perceptueel-uniforme uitvoer met Display P3 gamut-waarschuwingen. Gratis, alleen in je browser.
Omrekentools
Converteer elke hex-kleurcode naar RGB in je browser — 3-cijferig, 6-cijferig en 8-cijferig hex met alpha worden allemaal ondersteund. Gratis, direct, geen account, je kleuren verlaten de pagina nooit.
Omrekentools
Comprimeer JPEG, PNG & WebP tot 80% kleiner — in je browser, zonder uploaden. Batch 20 afbeeldingen, stel kwaliteit in, vergelijk voor & na. Gratis & privé.