HEX naar HSL Omzetten
Wat is het HEX naar HSL Omzetten
Deze tool zet HEX-kleurcodes (zoals #3B82F6) om naar HSL-waarden (zoals hsl(217, 91%, 60%)). HSL staat voor Hue (kleurtoon), Saturation (verzadiging) en Lightness (lichtheid) — een intuïtiever kleurmodel voor ontwerpers. De lichtheid aanpassen in HSL is veel makkelijker dan in HEX of RGB, ideaal voor kleurenpaletten en CSS custom properties.
Hoe te gebruiken
- Typ of plak een HEX-kleurcode in het HEX-veld (met of zonder #).
- HSL- en RGB-waarden verschijnen direct in de velden eronder.
- Klik op de kopieerknop naast HSL om het formaat hsl(h, s%, l%) te kopiëren.
- Wissel tussen alle 6 kleuromzetters via de moduslinks bovenaan.
Wanneer te gebruiken
Bouw je een kleurensysteem op vanuit een merkkleur? Plak de merk-HEX (#E63946) en krijg hsl(356, 75%, 56%) terug. Daarvandaan maak je lichtere tinten door de lichtheid te verhogen en donkerdere tinten door die te verlagen, allemaal met precies dezelfde kleurtoon.
Veelgestelde vragen
Wat is HSL en waarom gebruiken in plaats van HEX?
HSL (Hue, Saturation, Lightness) beschrijft kleur in intuïtieve termen. Hue is de positie op de kleurencirkel (0–360°), Saturation is de kleurintensiteit (0–100%) en Lightness is de helderheid (0–100%). Het is veel makkelijker om kleurvarianten te maken in HSL dan in HEX.
Wat is #FF0000 in HSL?
Zuiver rood #FF0000 is hsl(0, 100%, 50%). Hue 0° is rood op de kleurencirkel, 100% verzadiging betekent volledig verzadigd, en 50% lichtheid is de zuivere kleur.
Ondersteunt CSS HSL-kleuren?
Ja. Moderne CSS ondersteunt `hsl()`- en `hsla()`-notatie volledig. Bijvoorbeeld: `color: hsl(217, 91%, 60%);` en `background: hsla(217, 91%, 60%, 0.5);`
Wat is #000000 in HSL?
Zwart (#000000) is hsl(0, 0%, 0%). Lichtheid op 0% betekent zuiver zwart, ongeacht kleurtoon of verzadiging.
Kan ik deze tool delen met mijn ingevulde gegevens?
Ja. De URL wordt automatisch bijgewerkt terwijl je typt. Kopieer de link uit de adresbalk of gebruik de Deel-knop — iedereen die de link opent, ziet jouw gegevens al ingevuld.
Gerelateerde tools
HSL naar HEX Omzetten
Zet HSL-kleurwaarden direct om naar HEX-codes. Gratis HSL naar HEX omzetter met live voorbeeld. Zet hsl()-waarden om naar HEX-codes voor CSS en design.
Beeldverhouding Berekenen
Bereken de beeldverhouding, vind de ontbrekende breedte of hoogte en schaal afbeeldingen en video zonder de verhoudingen te vervormen. Gratis.
Base64 Decoder
Decodeer Base64-strings direct naar platte tekst in je browser. Ondersteunt volledige Unicode-uitvoer inclusief emoji's. Gratis online Base64-decoder.