Kleurconverter (Hex, RGB, HSL)
Kleurvoorbeeld
#6366f1
Gebruikshandleiding
Color Converter is een online tool voor het converteren van kleurwaarden tussen de formaten HEX, RGB, HSL, HSV en CMYK — met alle verwerking lokaal uitgevoerd in de browser. Kleurformaatconversie is een dagelijkse taak voor ontwerpers en front-end ontwikkelaars: ontwerphulpmiddelen zoals Figma exporteren HEX-codes; CSS gebruikt HEX en RGB/HSL; drukwerkflows vereisen CMYK-waarden; beeldverwerkingsbibliotheken kunnen HSV of genormaliseerde RGB-floats gebruiken; toegankelijkheidscontrolehulpmiddelen gebruiken sRGB-waarden voor contrastberekeningen. Handmatig converteren tussen deze formaten met formules is vervelend en foutgevoelig. Deze tool accepteert elke geldige kleurwaarde en toont direct de equivalenten in alle ondersteunde formaten. Voer een HEX-code in, plak een RGB-triplet, voer HSL-waarden in, of kies een kleur uit de native kleurenkiezer — alle representaties worden in realtime bijgewerkt. Het grote kleurstaal biedt directe visuele bevestiging. De converter verwerkt het volledige sRGB-kleurengamma correct en gaat elegant om met waarden buiten het bereik. U kunt ook CSS-kleurnamen invoeren (zoals "rebeccapurple", "tomato") om alle numerieke equivalenten te zien. Voor teams die design-tokens of kleurpaletten moeten bijhouden op meerdere platforms (iOS, Android, Web, Print), is dit een snelle referentietool om kleurconsistentie te garanderen tussen formaten met verschillende vereisten.
- Voer de kleurwaarde in — Typ of plak een willekeurige kleurwaarde in het invoerveld: een HEX-code (#6366f1 of #fff), een RGB-waarde (rgb(99, 102, 241)), een HSL-waarde (hsl(239, 84%, 67%)) of een CSS-kleurnaam. De converter detecteert automatisch het formaat.
- Gebruik de kleurenkiezer — Klik op het kleurstaal of de kleurkiezerknop om de native kleurenkiezer van de browser te openen. Kies visueel een willekeurige kleur en alle formaatwaarden worden direct bijgewerkt.
- Bekijk alle formaatequivalenten — De tool toont de geselecteerde kleur gelijktijdig in HEX, RGB (0–255), RGB (0–1 genormaliseerd), HSL (graden, percentage), HSV en CMYK. Alle waarden worden samen bijgewerkt elke keer dat u een invoer wijzigt.
- Pas individuele kanalen aan — Verfijn de kleur door individuele kanaalwaarden te wijzigen — verander bijvoorbeeld alleen het alfakanaal in RGBA, of pas de tint aan in HSL voor een iets warmere of koudere variant van dezelfde kleur.
- Kopieer elk formaat — Klik op de knop "Kopiëren" naast elke formaatri om die specifieke waarde naar het klembord te kopiëren. Kopieer bijvoorbeeld de HEX-code voor CSS, de RGB-waarde voor ontwerphulpmiddelen, of de CMYK-waarde voor drukspecificaties.
- Verifieer via het staal — Het grote kleurvoorbeeldstaal toont altijd de werkelijk weergegeven kleur. Gebruik het om visueel te bevestigen dat de geconverteerde waarden overeenkomen met de verwachte kleur voordat u ze kopieert.
Veelgestelde vragen
Welke kleurformaten ondersteunt deze tool?
De tool converteert tussen de drie meest gebruikte CSS-kleurformaten: HEX (#RRGGBB), RGB (rgb(r, g, b) met waarden 0–255) en HSL (hsl(h, s%, l%) met hoek 0–360° en verzadiging/helderheid 0–100%). Het accepteert ook CSS-kleurnamen (zoals "tomato" of "deepskyblue") als invoer.
Wat is het verschil tussen RGB en HSL?
RGB beschrijft kleuren door de intensiteit van rood, groen en blauw licht (elk 0–255). HSL beschrijft kleuren door tint (positie op het kleurenwiel, 0–360°), verzadiging (levendigheid, 0–100%) en helderheid (lichtheid, 0–100%). HSL is vaak intuïtiever voor designers omdat helderheid of verzadiging aanpassen eenvoudig is.
Vindt de kleurconversie plaats op een server?
Nee. Alle conversielogica vindt plaats in de browser via native JavaScript kleurberekeningen — er worden geen gegevens naar een server gestuurd.
Kan ik deze tool offline gebruiken?
2Kit is een PWA. Na je eerste bezoek wordt de tool gecacht en werkt volledig offline.
Waarom moet ik converteren tussen kleurformaten?
Verschillende tools en workflows gebruiken verschillende kleurformaten. Ontwerptools produceren vaak HEX, terwijl CSS-animaties en themasystemen HSL kunnen gebruiken voor eenvoudigere programmatische manipulatie. Deze tool laat je snel vertalen tussen formaten zonder mentale rekenkunde.
Technische implementatie
Alle verwerking vindt volledig in uw browser plaats — er worden nooit gegevens naar servers verzonden. Dit hulpmiddel werkt volledig offline als Progressive Web App (PWA): na het eerste bezoek worden alle pagina's en bestanden opgeslagen door de Service Worker en blijven beschikbaar zonder internetverbinding. Uw invoergegevens verlaten uw apparaat nooit, waardoor het veilig is voor gevoelige inhoud zoals API-sleutels, wachtwoorden, privéconfiguraties en vertrouwelijke documenten.