Hex naar HSL converter

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.

Geen tracking Draait in je browser Gratis

Alle kleurconversie gebeurt lokaal in je browser. Er gaat geen data naar een server.

HEX

RGB

HSL

HSV

HWB

CMYK

OKLCH

OKLAB

Named

Gamut: sRGB Display P3 Rec2020

Contrast vs: —

AA AA-Lg AAA AAA-Lg · APCA Lc —

Kleurenblindheid-simulatie (8 typen)

Protanopia (rood-blind) —

Deuteranopia (groen-blind) —

Tritanopia (blauw-blind) —

Achromatopsia (totaal) —

Protanomaly (rood-zwak) —

Deuteranomaly (groen-zwak) —

Tritanomaly (blauw-zwak) —

Achromatomaly (gedeeltelijk) —

Tints / Shades / Tones / Harmonies

Tints

Shades

Tones

Harmonies

Copy as code

CSS Custom Property —

Tailwind v4 —

SwiftUI —

Android Compose —

Flutter Dart —

Referentie van gangbare kleuren

Beoordeeld op CSS Color 4 §6.4-conformiteit, ondersteuning van 3/4/6/8-cijferige hex-vormen, juistheid van alpha-paar-decodering, en round-trip-stabiliteit tussen HEX en HSL over het 0-360° hue-bereik en 0-100% S/L-bereik. — Go Tools Engineering Team · May 27, 2026

Ons team verifieert hex-naar-HSL-conversies tegen het algoritme uit de W3C CSS Color 4 §6.4-specificatie en standaard stukgewijze-trig-round-trips via genormaliseerde RGB.

Wat is een hex naar HSL converter?

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 }

Kernfuncties

Alle vijf hex-vormen identiek geparseerd

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.

HSL-uitvoer in moderne ruimte-gescheiden syntax

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.

OKLCH als bron van waarheid, geen HSL-pivot

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.

Alpha-channel schoon gedecodeerd

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.

Acht andere formaten tegelijk zichtbaar

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.

WCAG + APCA contrast ingebouwd

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.

Copy as CSS / Tailwind v4 / SwiftUI / Compose / Flutter

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.

100% in-browser — geen upload, geen tracking

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.

Deelbare URL-hash voor de exacte kleur

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.

Alternatieven voor de hex naar HSL converter

RapidTables Hex to HSL

browsertool

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.

ColorHexa

browsertool

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.

W3Schools HSL Calculator

browsertool

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.

Browser DevTools Color Picker

ingebouwde browserfeature

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.

HSL Color Picker by Mothereff

browsertool

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.

ConvertingColors

browsertool

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.

Voorbeelden van hex naar HSL

CSS-variabeledefinitie voor een merkkleur

#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.

Designer vertaalt Figma-kleur naar HSL-picker

#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.

Snelle lightness-sweep voor een palet

#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.

8-cijferige hex met alpha → hsla()

#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.

Gangbare hex → HSL conversies

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.

Zwart

#000000 → hsl(0 0% 0%)

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.