HSL naar HEX converter
Stel kleurtoon, verzadiging en lichtheid in en krijg de bijbehorende HEX-kleurcode van zes tekens, klaar om te kopiëren.
hsl-invoer
Resultaat · HEX
#FF3D77
RGB
rgb(255, 61, 119)
HSL
hsl(342, 100%, 62%)
HSV
hsv(342, 76%, 100%)
CMYK
cmyk(0%, 76%, 53%, 0%)
Zo werkt het: HSL naar HEX
- 1
Voer een kleur in
Typ een kleurcode of kies een kleur met de kleurkiezer — elk veld accepteert het formaat dat erbij staat.
- 2
Bekijk de conversie
Het resultaat wordt direct bijgewerkt terwijl je typt, samen met een live voorbeeld van de kleur.
- 3
Kopieer de code
Kopieer de gewenste waarde met één klik en plak hem in je ontwerp, CSS of afdrukinstellingen.
Waarom HSL naar HEX omzetten
HSL is de meest intuïtieve manier om een kleursysteem op te bouwen. Je legt een kleurtoon vast, bijvoorbeeld 262° voor violet, en maakt een hele schaal door vooral de lichtheid te wijzigen: rond 95% voor achtergronden, 58% voor knoppen en accenten, 30% voor tekst. Ontwerpers en ontwikkelaars gebruiken deze methode voor lichtere en donkerdere tinten en voor donkere thema’s.
De uiteindelijke schaal moet echter meestal als HEX-codes worden aangeleverd: stijlgidsen, design tokens, Figma-bibliotheken, huisstijlhandboeken en veel contentmanagementsystemen verwachten #RRGGBB-waarden. Voer de HSL-waarden in en kopieer het HEX-resultaat — hsl(262, 83%, 58%) wordt bijvoorbeeld #7C3BED. De tool toont voor dezelfde kleur ook RGB, HSV en CMYK. Omdat HEX maar 256 niveaus per kanaal kan opslaan, veranderen heel kleine wijzigingen in HSL de HEX-code niet altijd.
Alles draait lokaal in je browser — je afbeeldingen worden nooit naar een server geüpload.