De converter accepteert elke CSS hex-vorm: 6-cijferig #3366cc, de verkorte 3-cijferige vorm #36c, en de 4- en 8-cijferige vormen met een alphakanaal, met of zonder #. Je krijgt de hsl()- of hsla()-string, de losse waarden en een uitsplitsing per component te zien - plus een rij om juist van HSL naar hex te gaan. Alles draait in je browser - geen upload, geen account, geen limiet.
Hex naar HSL Converter
Draait volledig in je browser - niets uploaden, geen account.
CSS
hsl(220, 60%, 50%)Hoe het wordt omgezet
Hue220
Saturation60%
Lightness50%
Andersom? HSL naar hex
#3366ccHoe zet ik hex om naar HSL?
Lees de hexcode eerst als rood, groen en blauw (0-255), en zet die kleur dan om naar hue, saturation en lightness. Hue is de hoek op de kleurencirkel (0-360), saturation geeft aan hoe levendig de kleur is (0-100%) en lightness hoe licht (0-100%). #3366cc wordt hsl(220, 60%, 50%). Deze tool doet dat direct terwijl je typt.
Zo werkt het
- 1Voer een hexcode in. Typ of plak een hexkleur zoals #3366cc (of #36c), of kies er een met het kleurstaal. De # is optioneel.
- 2Lees de HSL-waarde af. De hsl()-string, de losse waarden en een live kleurvoorbeeld werken bij terwijl je typt, met een uitsplitsing per component voor hue, saturation en lightness.
- 3Kopieer de notatie die je nodig hebt. Klik op Kopieer naast de hsl()-string of de losse waarden. Heb je de omgekeerde richting nodig? Vul hieronder hue, saturation en lightness in om de hexcode terug te krijgen.
Voor wie
- Front-end developers die een hexcode omzetten naar hsl() om de lightness voor hover- en focusstaten aan te passen zonder een compleet nieuwe kleur te kiezen.
- Ontwerpers die palettes bouwen en de hue vast houden terwijl ze saturation en lightness stap voor stap aanpassen om tinten en schaduwen uit een merkkleur te halen.
- Makers van thema's en design tokens die kleuren als HSL opslaan, omdat het veel makkelijker met de hand te lezen en aan te passen is dan een hexstring.
- Iedereen die kleuren afstemt tussen tools waarvan de een hex wil (Figma, de meeste CSS) en de ander HSL (SCSS-helpers, sommige kleursystemen).
Veelgestelde vragen
Is deze hex naar HSL converter gratis?
Ja - hij is 100% gratis, zonder registratie en zonder limiet. Alles draait in je browser.
Worden mijn kleuren ergens geupload?
Nee. De omzetting is gewone JavaScript die op je apparaat draait - er wordt niets naar een server gestuurd, en de tool blijft offline werken zodra de pagina geladen is.
Wat is HSL?
HSL staat voor hue, saturation en lightness. Hue is een hoek van 0 tot 360 graden op de kleurencirkel, saturation geeft aan hoe levendig de kleur is van 0 tot 100 procent, en lightness loopt van 0 procent (zwart) via de pure kleur bij 50 procent tot 100 procent (wit).
Hoe zet je hex met de hand om naar HSL?
Zet de hex om naar rood, groen en blauw en deel elke waarde door 255. Neem het maximum en minimum van de drie: lightness is hun gemiddelde, saturation is (max - min) gedeeld door (1 - |2L - 1|), en hue volgt uit welk kanaal het grootst is, herschaald naar 0-360 graden.
Ondersteunt de tool de verkorte vorm zoals #36c?
Ja. In CSS-shorthand wordt elk cijfer verdubbeld, dus #36c wordt #3366cc en zet om naar hsl(220, 60%, 50%). De 4-cijferige vorm werkt hetzelfde, met het laatste cijfer als alpha.
Hoe gaat de tool om met transparantie (HSLA)?
Een 8-cijferige hexcode bevat alpha in het laatste paar. Die byte (0-255) wordt gedeeld door 255 om de 0-1-alpha te krijgen die hsla() verwacht, afgerond op drie decimalen - zo wordt #3366cc80 hsla(220, 60%, 50%, 0.502).
Kan de tool ook HSL omzetten naar hex?
Ja. Gebruik de rij HSL naar hex onder het resultaat: vul hue (0-360) en saturation en lightness (0-100%) in en je krijgt direct de hexcode terug. Waarden buiten bereik worden geclipt.
Waarom is HSL handiger dan hex?
HSL is leesbaar voor mensen: je maakt een kleur lichter door L te verhogen, dooft hem uit door S te verlagen, of verschuift de kleurfamilie door H te veranderen - allemaal zonder hexcijfers te gokken. Dat maakt het ideaal voor consistente palettes, hover-staten en design tokens.