Hoe te Gebruiken
- Voer gegevens in
Vul de vereiste waarden in de invoervelden in.
- Pas instellingen aan
Selecteer de juiste opties en instellingen.
- Bekijk resultaten
Klik Bereken voor directe resultaten.
Wat is kleurcode-conversie?
Kleurcode-conversie betekent dezelfde kleur uitdrukken in verschillende notatiesystemen zoals HEX, RGB en HSL. Een scherm maakt kleur door de primaire kleuren van licht — rood, groen en blauw — te mengen, dus elke kleur valt uiteindelijk terug te brengen tot de intensiteit van drie RGB-kanalen. HEX comprimeert deze RGB-waarden tot een hexadecimale string van zes tekens (#RRGGBB), terwijl HSL ze herstructureert zoals mensen kleur waarnemen, via een tinthoek, verzadiging en lichtheid.
Waarom conversie belangrijk is
- CSS schrijven — Neem de HEX-code uit een ontwerp en converteer die naar RGB, wat het aanpassen van de transparantie makkelijker maakt.
- Kleur bijstellen — Wanneer je een kleur slechts iets donkerder wilt maken, hoef je na conversie naar HSL alleen de L-waarde aan te passen.
- Samenwerken — Houd de Figma-HEX van de ontwerper, de RGB-variabelen van de ontwikkelaar en de kleurreferenties van het drukteam op één lijn.
In welk formaat je ook invoert, deze converter berekent alle andere formaten in één keer en toont de werkelijke kleur in een voorbeeld.
Conversieformule
HEX → RGB splitst het hexadecimale getal in paren van twee cijfers en leest elk als een decimaal getal.
R = parseInt(hex[0:2], 16); G en B worden op dezelfde manier berekend. Voorbeeld: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).
RGB → HSL normaliseert eerst elk kanaal naar het bereik 0-1 en bepaalt dan de lichtheid.
L = (max + min) / 2S = delta / (2 − max − min) (wanneer L > 0,5)
waarbij delta = max − min. In het voorbeeld hierboven geven max=1 en min=0,2 L = 0,6 (60%), S = 0,8/0,8 = 100% en een tinthoek H ≈ 11°, wat naar HSL(11°, 100%, 60%) wordt omgezet.