RGB naar HSL converter
Zet rood-, groen- en blauwwaarden om naar kleurtoon, verzadiging en lichtheid, zodat je kleuren in CSS makkelijker kunt aanpassen.
rgb-invoer
Resultaat · HSL
hsl(344, 100%, 62%)
HEX
#FF3D72
RGB
rgb(255, 61, 114)
HSV
hsv(344, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
Zo werkt het: RGB naar HSL
- 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.
RGB tegenover HSL
RGB bouwt een kleur op uit drie lichtkanalen. Dat past bij schermen, maar is lastig met de hand aan te passen: rgb(255, 61, 114) iets donkerder maken betekent alle drie de getallen wijzigen. HSL beschrijft dezelfde kleur als kleurtoon, een hoek op het kleurenwiel van 0 tot 360°, plus verzadiging en lichtheid in procenten, zodat dat roze hsl(344, 100%, 62%) wordt.
Door die opbouw is HSL ideaal om tinten en thema’s te maken. Houd de kleurtoon en verzadiging gelijk en verlaag de lichtheid voor een hover- of ingedrukte toestand, verhoog die voor een getinte achtergrond, of verlaag de verzadiging voor een gedempte versie. Alle moderne browsers accepteren hsl() in CSS, dus je kunt het resultaat direct plakken. De converter rondt waarden af op hele getallen, dus bij terugrekenen kan een kanaal één stap verschuiven.
Alles draait lokaal in je browser — je afbeeldingen worden nooit naar een server geüpload.