Een kleur converteren tussen RGB, HSL en hexadecimaal

Werken met kleur op het web betekent voortdurend schakelen tussen meerdere notaties. Een kleurconverter voorkomt handmatige fouten en laat u direct van het ene formaat naar het andere overgaan, afhankelijk van de gebruikscontext. Elk formaat heeft zijn sterke punten, en weten welk formaat u moet gebruiken is een van de reflexen van de frontend-ontwikkelaar.

Dit zijn de typische toepassingen die een kleurconversie motiveren:

• RGB is native in CSS en JavaScript, leesbaar voor mensen om een dominante kleur te begrijpen (kanalen rood, groen, blauw op 0-255).
• HSL maakt het wijzigen van een tint triviaal: u past gewoon de verzadiging of de helderheid aan zonder elk kanaal opnieuw te berekenen.
• HEX is het canonieke formaat voor kopiëren en plakken: zes tekens, overal compatibel, ideaal voor Figma- of Sketch-mockups of stijlgidsen.
• De conversies HEX naar RGB, RGB naar HEX, HEX naar HSL en hun omgekeerde zijn de meest voorkomende bewerkingen in CSS en JavaScript.

RGB en RGBA (Red, Green, Blue, Alpha)

Elk kanaal wordt gecodeerd op een geheel getal tussen 0 en 255, wat overeenkomt met een byte per component en 16 777 216 mogelijke kleuren oplevert. Het alfakanaal van RGBA gaat van 0 (transparant) tot 1 (ondoorzichtig) en regelt de transparantie.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX en HEX8 (hexadecimale notatie)

Zeer verspreid compact formaat: #RRGGBB op zes tekens, waarbij elk paar een RGB-kanaal in grondtal 16 vertegenwoordigt. De variant #RRGGBBAA op acht tekens voegt het alfakanaal in hexadecimaal toe (00 transparant, FF ondoorzichtig). De korte notatie #RGB bestaat ook: #F53 is het equivalent van #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* forme courte */

HSL en HSLA (Hue, Saturation, Lightness, Alpha)

HSL beschrijft kleur op een perceptuele manier. Hue is een hoek op het kleurenwiel (0 tot 360°), Saturation en Lightness zijn percentages. Het is het voorkeursformaat om varianten te genereren: een hover-knop verlichten, een uitgeschakelde status ontzadigen, een coherent palet maken door alleen de tint te variëren.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* plus clair */
$primary-muted: hsl(247, 30%, 36%);    /* moins saturé */

Andere bestaande formaten

CMYK (Cyan, Magenta, Yellow, Key) wordt gebruikt in de drukkerij: het beschrijft een kleur door inkten af te trekken en is niet relevant voor het scherm. OKLCH en LAB zijn perceptueel uniforme ruimtes die zijn verschenen in CSS Color Level 4; ze bieden betere controle over de waargenomen helderheid. Deze tool richt zich op de RGB-, HEX- en HSL-conversies, die de overgrote meerderheid van webbehoeften dekken.

HEX naar RGB komt neer op het parsen van de tekenreeks in paren tekens en het interpreteren van elk paar als een geheel getal in grondtal 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB naar HEX is de omgekeerde bewerking: elk kanaal wordt geconverteerd naar grondtal 16, aangevuld tot twee tekens en vervolgens samengevoegd.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB naar HSL is meer algoritmisch. We normaliseren de kanalen tussen 0 en 1, berekenen het min en max om de helderheid af te leiden, vervolgens de verzadiging en tenslotte de tint volgens het dominante kanaal. De volledige formule is gedocumenteerd in de specificatie CSS Color Module Level 3.

De tool werkt in beide richtingen tussen RGB, HEX en HSL. Om een conversie uit te voeren:

1. Kies het invoerformaat: RGB, HEX of HSL.
2. Voer de waarde in (bijvoorbeeld #1400B6, rgb(20, 0, 182) of hsl(247, 100%, 36%)).
3. Start de conversie: de equivalenten in de twee andere formaten worden onmiddellijk weergegeven.
4. Kopieer het gewenste resultaat via de speciale knop en plak het in uw stylesheet of mockup.

De berekening wordt uitgevoerd aan de browserkant, er worden geen gegevens naar een server gestuurd.

• Webdesign en CSS: een HEX-code uit een mockup halen en het equivalente HSL verkrijgen om een hover- of active-status te genereren zonder van de tint af te wijken.
• Visuele identiteit en palet: een primaire kleur in verschillende varianten declineren (licht, donker, gedempt) door te spelen met de HSL-helderheid of -verzadiging.
• Illustratie en grafisch ontwerp: een schermkleur (RGB) omzetten naar een hexadecimale code om door te geven aan software of een klant.
• Toegankelijkheid: converteren naar RGB-formaat om vervolgens een contrastratio te berekenen (WCAG AA vereist 4.5:1 voor normale tekst) met de achtergrondkleur.
• CSS-variabelen en preprocessors: design tokens voeden in een SASS-bestand of een Tailwind-thema vanuit één enkele referentiekleur.

Enkele volledige conversies ter illustratie van de overeenkomst tussen de drie formaten:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Met alfakanaal:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Wat is het verschil tussen HEX en HEX8?

Klassieke HEX codeert drie RGB-kanalen op zes tekens (#RRGGBB). HEX8 voegt twee tekens toe voor het alfakanaal (#RRGGBBAA), waardoor transparantie in een enkele tekenreeks beheerd kan worden. #1400B6FF en #1400B6 geven visueel dezelfde, ondoorzichtige kleur.

Moet u in CSS de voorkeur geven aan HSL of RGB?

Beide zijn equivalent in weergave. HSL is expressiever om een coherent palet te genereren of statusvarianten (hover, focus), omdat u slechts één perceptuele parameter wijzigt. RGB blijft praktisch wanneer u werkt met gegevens uit een canvas of sensor.

Waarom geeft mijn HEX een andere tint dan verwacht?

Drie veelvoorkomende oorzaken: verwarring tussen kort #RGB en lang #RRGGBB (de tekens worden gedupliceerd, niet samengevoegd), kopieerfout op een teken, of weergave op een niet-gekalibreerd scherm. Controleer ook of uw CSS geen oudertransparantie over elkaar legt die de uiteindelijke weergave wijzigt.

Waarvoor dient het alfakanaal van RGBA en HSLA?

Het alfakanaal regelt de ondoorzichtigheid van de kleur, van 0 (volledig transparant) tot 1 (volledig ondoorzichtig). Het is nuttig voor overlays, schaduwen, uitgeschakelde statussen of superposities op afbeeldingen. In tegenstelling tot de CSS-eigenschap opacity, beïnvloeden RGBA en HSLA alleen de beoogde kleur en niet de kinderen ervan.

Kan een kleur zonder precisieverlies geconverteerd worden?

Tussen RGB en HEX is de conversie exact, beide formaten coderen dezelfde informatie op 24 bits. De conversie naar HSL omvat afrondingen op de tint, de verzadiging en de helderheid; een retour RGB > HSL > RGB kan dus een waarde teruggeven die op bepaalde kanalen één eenheid afwijkt.

Waarom een online converter gebruiken in plaats van een eigen functie?

Voor een eenmalige test, het prototypen van een palet of het snel controleren van het HEX-equivalent van een HSL-kleur uit een mockup, is een online converter direct beschikbaar. Voor een terugkerende programmatische behoefte blijft een bibliotheek zoals color, chroma-js of tinycolor2 geschikter.