Kleurconverter

Over kleurformaten

Dezelfde kleur kan worden geschreven als HEX (#ff6600), RGB (rgb(255, 102, 0)) of HSL (hsl(24, 100%, 50%)) — drie verschillende manieren om exact dezelfde kleur te beschrijven, elk geschikt voor een andere situatie.

HEX heeft een compacte afkorting: een 3-cijferige code zoals #f60 is exact gelijk aan de 6-cijferige #ff6600 — elk cijfer wordt gewoon verdubbeld —, en een 8-cijferige vorm zoals #ff6600cc voegt een alfakanaal toe op dezelfde manier als rgba() en hsla(). Deze tool accepteert en normaliseert de afkorting als invoer, en geeft altijd de volledige 6- of 8-cijferige vorm als uitvoer, zodat het resultaat ondubbelzinnig elders geplakt kan worden. Eén ding doet hij niet: kleuren controleren op toegankelijk contrast of kleurenblindheid simuleren — dat is een aparte, even belangrijke ontwerpvraag, los van formaatconversie.

Waar je het tegenkomt

• Een HEX-kleur van een ontwerper omzetten naar de RGB of HSL die een codebase al gebruikt
• Helderheid of verzadiging aanpassen, wat veel eenvoudiger te overzien is in HSL dan in RGB
• Een kleur uitlezen uit de berekende stijlen van een browser en omzetten naar een ontwerpspecificatie
• Controleren hoe een CSS-kleurwaarde er werkelijk uitziet voordat je hem vastlegt

Veelgestelde vragen

Waarom bestaat HSL als RGB al werkt?
RGB beschrijft een kleur als rood-, groen- en blauwlichtintensiteiten, wat slecht aansluit op hoe mensen over kleur denken. HSL scheidt tint, verzadiging en helderheid, zodat "donkerder maken" of "levendiger maken" neerkomt op het wijzigen van één getal in plaats van drie waarden opnieuw te berekenen.

Wat betekent de alfawaarde in rgba()/hsla()?
Dat is de transparantie, van 0 (volledig doorzichtig) tot 1 (volledig dekkend). Deze tool behoudt deze waarde in alle formaten — ook als 8-cijferige HEX — wanneer je invoer er een bevat.

Worden benoemde CSS-kleuren zoals "tomato" ondersteund?
Nog niet — alleen HEX-, RGB(A)- en HSL(A)-invoer. Zoek eerst de HEX-waarde van de benoemde kleur op als je daarmee begint.

Is #f60 dezelfde kleur als #ff6600?
Ja, precies. De 3-cijferige HEX-afkorting verdubbelt elk cijfer om de volledige vorm te krijgen: f wordt ff, 6 wordt 66, 0 wordt 00. Het is puur een kortere schrijfwijze voor bepaalde kleuren — alleen die waarbij elk kanaal toevallig een herhaald cijfer is —, geen andere of minder precieze kleurruimte. Deze tool accepteert beide lengtes en geeft altijd de volledige 6- of 8-cijferige vorm als uitvoer.