HEX RGB-converter
Zet kleuren om tussen HEX, RGB(A) en HSL(A) met live updates, alfa-ondersteuning en kopieerbare CSS-waarden.
🔒 Draait volledig in uw browser — niets wordt geüploadKleurformaten omzetten zonder te gokken
Kleurwaarden gaan vaak heen en weer tussen tools die verschillende formaten verkiezen. Een ontwerper levert misschien een HEX-token aan, een CSS-animatie heeft RGB-kanalen nodig en een thema-aanpassing gaat het makkelijkst in HSL. Deze HEX RGB-converter houdt de gangbare webformaten gesynchroniseerd, zodat je de versie invoert die je hebt en de versie kopieert die je nodig hebt. Het live voorbeeld maakt fouten ook meteen zichtbaar: als een kanaal verkeerd is getypt, verandert het voorbeeld direct.
De converter ondersteunt de dagelijkse CSS-workflow: zescijferige HEX, RGB, RGBA, HSL en HSLA. Alfa wordt apart geregeld omdat dekking meestal een ontwerpkeuze is en geen onderdeel van een merkkleurtoken. Zet alfa op één voor dekkende kleuren, of verlaag de waarde om overlays, focusringen, schaduwen en doorschijnende achtergronden te maken die dezelfde onderliggende tint gebruiken.
Wanneer RGB, RGBA, HSL of HSLA gebruiken
RGB beschrijft schermkleur direct en is nuttig als je waarden overneemt uit screenshots, canvas-uitvoer of oudere ontwerptools. RGBA voegt transparantie toe, handig voor overlays en subtiele randen. HSL beschrijft kleur in tint, verzadiging en lichtheid en is daardoor natuurlijker wanneer je verwante kleuren wilt maken: draai de tint voor een nieuw accent, verlaag de verzadiging voor een gedempte staat of verhoog de lichtheid voor een lichtere tint. HSLA voegt dezelfde alfa-regeling toe aan dit beter leesbare model.
Betrouwbare waarden voor CSS en design tokens
Consistente conversies zijn belangrijk in designsystemen. Afrondingsfouten of gekopieerde typefouten kunnen bijna-dubbele kleuren veroorzaken die moeilijk op te merken zijn maar lastig te onderhouden. Deze tool beperkt RGB-kanalen tot het geldige bereik van 0–255, houdt HSL-percentages binnen 0–100 en formatteert de uitvoer als CSS die je direct kunt plakken. Omdat alles lokaal draait, kun je onuitgebrachte productkleuren, klantpaletten of interne merktokens veilig omzetten zonder ze ergens te uploaden.
Hoe te gebruiken
- Voer een waarde inTyp een HEX-waarde of pas de RGB- en HSL-kanalen aan.
- Bekijk de formatenDe converter houdt de HEX-, RGB(A)- en HSL(A)-uitvoer gesynchroniseerd.
- Kopieer de CSSGebruik de kopieerknoppen om het gewenste formaat te plakken in CSS, design tokens of documentatie.