Kleurconverter

De Kleurconverter is een gratis tool die een kleur in HEX, HEX alpha, RGB, RGBA, HSV, HSL of HSLA omzet naar meerdere gelijkwaardige kleurformaten.

Welke kleurformaten kan ik converteren?

Je kunt HEX, HEX alpha, RGB, RGBA, HSV, HSL of HSLA invoeren en voor elk ondersteund formaat de bijbehorende waarde bekijken. Dat is handig als een ontwerpspecificatie, stylesheet of externe API dezelfde kleur op een andere manier weergeeft.

• HEX geeft de rode, groene en blauwe kanalen weer met hexadecimale paren, meestal in de vorm #RRGGBB.
• HEX Alpha voegt een kanaal voor dekking toe. In moderne CSS-notatie wordt dit vaak weergegeven als #RRGGBBAA.
• RGB gebruikt waarden voor de rode, groene en blauwe kanalen, doorgaans van 0 tot 255.
• RGBA voegt alfatransparantie toe aan RGB.
• HSV beschrijft tint, verzadiging en waarde. Dit formaat wordt veel gebruikt in kleurenkiezers, maar is geen standaard CSS-kleurfunctie.
• HSL beschrijft tint, verzadiging en lichtheid. CSS ondersteunt HSL rechtstreeks.
• HSLA is HSL met een alfawaarde.

RGB en HSL zijn verschillende wiskundige beschrijvingen van een kleur, niet verschillende kleuren. Met conversie verander je de notatie, terwijl de bedoelde kleur zo nauwkeurig mogelijk behouden blijft binnen de mogelijkheden van het doelformaat.

Hoe gebruik ik de Kleurconverter?

Voer in het veld Color één volledige kleurwaarde in volgens een van de geaccepteerde formaten. Bekijk of kopieer daarna de gegenereerde waarden uit de uitvoervelden.

1. Kopieer de bronwaarde exact, inclusief het hekje aan het begin en, waar van toepassing, komma's, haakjes, procenttekens of de alfacomponent.
2. Plaats de waarde in het veld Color.
3. Bekijk de gelijkwaardige waarden onder HEX, HEX Alpha, RGB, RGBA, HSV, HSL en HSLA.
4. Kies een ondersteund kleurformaat dat door het doelsysteem wordt geaccepteerd. Voor een CSS-regel zijn HEX, RGB, RGBA, HSL en HSLA gebruikelijke keuzes. HSV wordt vaker gebruikt in bewerkingsinterfaces en kleurberekeningen.

De conversie vindt plaats op de server. Je invoer wordt via HTTPS naar de server verstuurd en niet opgeslagen. Een afzonderlijke kleur is zelden gevoelig, maar controleer voordat je gegevens naar een onlinedienst stuurt of een nog niet gepubliceerde kleurenpalet of verzameling ontwerptokens vertrouwelijk is.

Spaties en leestekens maken deel uit van de syntaxis van RGB, HSL en vergelijkbare formaten. Procenttekens geven aan dat een waarde een percentage is. Een los getal, een lege waarde of willekeurige tekst stelt geen kleur voor. Tekst met accenten of niet-Latijnse tekens heeft binnen deze numerieke formaten evenmin een vastgelegde betekenis.

Hoe lees ik de geconverteerde waarden?

Lees elk resultaat als een andere notatie voor dezelfde kleur. Let vooral op het bereik van de kanalen, percentages en alfatransparantie. Welk veld je moet kopiëren, hangt af van de kleurnotatie die het ontvangende systeem ondersteunt.

Bij HEX met zes cijfers staat het eerste paar voor rood, het tweede voor groen en het derde voor blauw. Zo bevat #336699 de hexadecimale kanaalwaarden 33, 66 en 99. Die komen overeen met de decimale RGB-waarden 51, 102 en 153.

De tint wordt normaal gesproken uitgedrukt als een hoek op een kleurencirkel. Verzadiging en lichtheid of waarde worden meestal als percentages weergegeven. HSL-lichtheid en HSV-waarde worden anders berekend. Vergelijk hun percentages daarom niet alsof ze dezelfde eigenschap meten.

Alpha beschrijft de dekking. Voor een volledig dekkende kleur is geen formaat met alfaondersteuning nodig, maar voor een semitransparante kleur wel. Als je een RGBA- of HSLA-kleur omzet naar gewoon RGB, HSL of HEX met zes cijfers, kan de alfawaarde niet in die doelnotatie worden vastgelegd.

Deze converter is niet beschreven als syntaxisvalidator met gedetailleerde foutmeldingen. Vertrouw er daarom niet op dat de tool precies aanwijst welk teken in ongeldige invoer fout is. Veelvoorkomende fouten in kleursyntaxis zijn een ontbrekend hekje bij HEX, niet-sluitende haakjes, weggelaten procenttekens, een alfawaarde buiten het verwachte bereik of een combinatie van de kanaalconventies van HSL en RGB.

Voorbeelden van kleurconversies

Een eenvoudig voorbeeld laat zien hoe HEX, RGB, HSL en HSV zich tot elkaar verhouden. Zuiver rood kan in de volgende gelijkwaardige vormen worden geschreven.

• HEX-invoer #ff0000
• RGB-equivalent rgb(255, 0, 0)
• HSL-equivalent hsl(0, 100%, 50%)
• HSV-equivalent hsv(0, 100%, 100%)

Voor een minder verzadigde kleur is #336699 gelijkwaardig aan rgb(51, 102, 153). De HSL-weergave is hsl(210, 50%, 40%), terwijl de HSV-weergave een tint van 210 graden, een verzadiging van ongeveer 66,7% en een waarde van 60% heeft. Een interface kan decimalen afronden of andere spaties gebruiken zonder dat dit de praktische betekenis verandert.

Transparantie levert nog een duidelijk voorbeeld op. rgba(255, 0, 0, 0.5) en hsla(0, 100%, 50%, 0.5) beschrijven beide rood met een dekking van 50%. Volgens de gangbare CSS-conventie voor HEX met acht cijfers is de bijbehorende waarde #ff000080, waarbij 80 de gekwantiseerde alfabyte is.

Wanneer is het zinvol om een kleur te converteren?

Kleurconversie is zinvol als de ontvangende toepassing een andere notatie vereist of als een andere weergave het opsporen van fouten eenvoudiger maakt. Denk bijvoorbeeld aan het omzetten van een Figma-waarde naar een aangepaste CSS-eigenschap, het controleren van een RGBA-waarde uit Chrome DevTools, het voorbereiden van kleurvelden voor een API-payload of het beoordelen van themagegevens van derden vóór implementatie.

Conversie is meestal niet nodig als het doelsysteem de bestaande kleurnotatie al ondersteunt. Alleen voor machineleesbare CSS heeft het weinig nut om HEX met zes cijfers naar RGB om te zetten. Bovendien kan herhaaldelijk heen en weer converteren afrondingsverschillen in HSL- of HSV-waarden veroorzaken. Voeg ook geen alfakanaal toe als vaststaat dat alle kleuren volledig dekkend zijn.

Wil je visueel een kleur kiezen in plaats van een bekende waarde omzetten, dan is de Kleurenkiezer de meest directe tool. Conversie is ook geen vervanging voor contrasttests, simulaties van kleurenblindheid of kleurprofielbeheer. Gelijkwaardige numerieke waarden bewijzen niet dat voorgrondtekst voldoet aan de contrasteisen van WCAG.

Veelgestelde vragen

Accepteert de converter benoemde CSS-kleuren?

Nee. De opgegeven geaccepteerde formaten zijn HEX, HEX alpha, RGB, RGBA, HSV, HSL en HSLA. Namen zoals red, rebeccapurple en transparent staan daarom niet vermeld als ondersteunde invoer. Zet een benoemde kleur eerst om naar een numerieke CSS-waarde voordat je deze invoert.

Kan ik HEX-waarden met drie cijfers invoeren?

HEX wordt als invoer geaccepteerd, maar de ondersteunde HEX-lengtes zijn niet gedocumenteerd. Voor voorspelbare invoer kun je een verkorte notatie zoals #369 uitbreiden naar #336699. Hetzelfde geldt voor een verkorte notatie van vier cijfers met alfa.

Kan ik een volledige CSS-declaratie plakken?

Voer alleen de kleurwaarde in, niet de volledige declaratie. Gebruik bijvoorbeeld #336699 in plaats van color: #336699;, want de eigenschapsnaam en puntkomma maken geen deel uit van de kleur zelf. Verwijder aanhalingstekens rond de waarde als je deze uit JSON of een configuratiebestand kopieert.

Blijven informatie over wide gamut en kleurprofielen behouden?

Nee. Wide-gamutformaten en ingesloten kleurprofielen staan niet vermeld als ondersteunde formaten. Display P3, Lab, LCH en ICC-profielgegevens bevatten informatie die niet kan worden uitgedrukt in de beschikbare HEX-, RGB-, HSL- en HSV-velden. Gebruik een toepassing met kleurbeheer als je een conversie nodig hebt die rekening houdt met kleurprofielen.

Waarom bevatten geconverteerde waarden soms decimalen?

Berekeningen voor HSL en HSV kunnen percentages met decimalen opleveren, zelfs als de RGB-kanalen van de bron gehele getallen zijn. Als je die waarden afrondt, kan een latere conversie terug naar RGB iets afwijken. Behoud bij het opslaan van ontwerptokens de beschikbare nauwkeurigheid en rond alleen af als het doelformaat of de programmeerstandaard dat vereist.