Kleurconverter
Local only — nothing is uploaded unless you save or share it.
Een kleurconverter: HEX naar RGB, RGB naar HEX, en allebei naar HSL.
- Typ of plak een kleur in welk formaat dan ook
- Zie hem meteen omgezet naar elk ander formaat
- Kopieer de notatie die je nodig hebt
- HEX
- HEX met alfa
- RGB
- HSL
Bewaar deze tool
Houd Kleurconverter bij de hand
Gebruik het deelmenu van je browser en dan „Zet op beginscherm”.
Over deze tool
Hex naar RGB omzetten, RGB naar hex, of een van beide naar HSL, is een kleine maar constante belasting, omdat ontwerpprogramma's, CSS en fotobewerkers elk een andere kleurnotatie verkiezen. HEX is compact en overheerst in CSS en bij het overdragen van ontwerpen. RGB komt direct overeen met de manier waarop een scherm werkelijk licht uitstraalt. HSL beschrijft een kleur zoals mensen erover denken, als een tint met een hoeveelheid kleurigheid en lichtheid, en dat maakt het met de hand bouwen van een palet veel eenvoudiger: houd de tint vast, verander de lichtheid, en je hebt een samenhangende reeks schakeringen. Deze converter neemt al die formaten aan plus de gangbare kleurnamen, en is bewust mild over de schrijfwijze. Je mag een kale hex plakken met of zonder hekje, drie of zes cijfers gebruiken, een alfakanaal meegeven, en zowel de stijl met komma's als de nieuwere CSS-syntaxis met spaties schrijven. Alles wordt omgezet terwijl je typt, met een levend kleurvlak zodat je het resultaat ziet in plaats van het je voor te stellen.
Veelgestelde vragen
Welk formaat kan ik het beste in CSS gebruiken?
Ze werken allemaal. HEX is het gangbaarst en het compactst. HSL is de moeite waard wanneer je met de hand varianten van een kleur bouwt, want de lichtheid bijstellen terwijl tint en verzadiging blijven staan geeft veel makkelijker een samenhangende reeks schakeringen dan het bewerken van hexcijfers.
Zit er naast de omzetting ook een kleurenkiezer bij?
Ja — het kleurvlak opent de kleurenkiezer van je systeem, dus een waarde kan op het oog gekozen worden in plaats van getypt, en de HEX-, RGB- en HSL-vormen werken samen bij. Dat is in de praktijk het werk van een HTML-kleurenkiezer: iets kiezen dat er goed uitziet en de code meenemen die een stylesheet accepteert.
Wat betekenen de extra cijfers in een hex van acht tekens?
De laatste twee zijn het alfakanaal, van 00 voor volledig doorzichtig tot ff voor volledig dekkend. Elke huidige browser ondersteunt het, en het is vaak eenvoudiger dan overstappen op rgba alleen om transparantie toe te voegen.
Waarom verandert de waarde soms iets als ik naar HSL en terug omzet?
Omdat de HSL-onderdelen voor de leesbaarheid op hele getallen worden afgerond, en die afronding is niet perfect omkeerbaar. Het verschil is hooguit een stap of twee per kanaal en is niet te zien, maar het betekent wel dat de heen-en-terugreis niet altijd byte voor byte hetzelfde is.
Kan ik een kleur zonder hekje plakken?
Ja. Kale hexwaarden worden aangenomen, net als de verkorte notatie met drie cijfers, de CSS-syntaxis met spaties zoals rgb(59 130 246) en gangbare kleurnamen als teal of crimson.
Hoe weet ik of tekst leesbaar zal zijn op een kleur?
Het voorbeeld toont zowel zwarte als witte tekst op jouw kleur zodat je het meteen kunt beoordelen. Voor een echte voldoende of onvoldoende tegen de toegankelijkheidsrichtlijnen gebruik je de contrastchecker, die de WCAG-verhouding netjes berekent.
Help deze tool beter te maken
Een fout gevonden, iets anders willen, of mis je een tool?
Je hebt een niet-verzonden bericht.
Dank je — hij is binnen. Het antwoord vind je in je postvak.Go to my messages