HSL naar RGBA converter
Zet kleurtoon, verzadiging en lichtheid om naar een rgba()-waarde die klaar is voor transparantie in CSS.
hsl-invoer
Resultaat · RGBA
rgba(255, 61, 119, 1)
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 RGBA
- 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.
Over HSL en RGBA
HSL en RGBA komen voort uit twee verschillende manieren om over kleur te denken. HSL bepaalt een kleur aan de hand van kleurtoon, verzadiging en lichtheid, waardoor je makkelijk een reeks verwante tinten ontwerpt. RGBA bepaalt hem met rood-, groen- en blauwwaarden van 0 tot 255 plus een alfakanaal voor dekking — het formaat dat veel JavaScript-bibliotheken, canvas-tekencode, grafiektools en oudere CSS-codebases verwachten.
De converter zet je HSL-waarden om naar rgba() met alfa op 1, wat volledig dekkend betekent. Wijzig dat laatste getal voor transparantie: 0.8 voor een licht doorschijnend paneel, 0.3 voor een overlay op een foto, 0 voor onzichtbaar. Tip: in moderne CSS kun je alfa ook direct aan HSL toevoegen, zoals in hsl(160 60% 45% / 0.3), maar rgba() is de veiligere keuze als een bibliotheek of e-mailsjabloon de nieuwere syntaxis niet ondersteunt.
Alles draait lokaal in je browser — je afbeeldingen worden nooit naar een server geüpload.