HEX naar RGB

Maak van een HEX-kleur een RGB-waarde

HEX en RGB beschrijven dezelfde kleuren in twee notaties. Een HEX-code zoals #8997BB bestaat uit drie paren hexadecimale cijfers voor rood, groen en blauw. RGB schrijft dezelfde hoeveelheden als gewone getallen van 0 tot 255: rgb(137, 151, 187).

Plak een HEX-code en deze converter geeft de RGB-waarde terug. Die heb je nodig in veel ontwerp- en grafiektools, om transparantie toe te voegen met rgba() en voor code die apart met kleurkanalen werkt.

De berekening is eenvoudig maar saai: elk paar wordt omgerekend van het zestientallige naar het tientallige stelsel. 89 in hex is 8×16 + 9 = 137.

Zo gebruik je HEX naar RGB

1. Voer de HEX-kleur in met een # ervoor, bijvoorbeeld #8997BB. Zonder # herkent de tool het niet als HEX-code en toont hij een foutmelding.
2. Verstuur om om te zetten.
3. Kopieer de RGB-waarde.

Voorbeelden

Huisstijlkleur periwinkle

Invoer: #8997BB

Uitvoer: rgb(137,151,187)

Lavendel

Invoer: #C6CDE5

Uitvoer: rgb(198,205,229)

Verkorte notatie van drie cijfers

Invoer: #fa0

Uitvoer: rgb(255,170,0)

Elk cijfer wordt verdubbeld: #fa0 is #ffaa00.

HEX van acht cijfers met alfa

Invoer: #8997BB80

Uitvoer: rgba(137,151,187,0.5)

De rij rgb() negeert de alfa, maar de rij rgba() houdt hem: 80 in hex is 128 van 255, getoond als 0.5. De rij HEXA leest dan #8997bb7f, omdat 0.5 terug wordt omgerekend naar 127 (7f).

Alle formaten tegelijk

Invoer: #8997BB

Uitvoer:

rgb(137,151,187)
hsl(223,27%,64%)
hsv(223,27%,73%)
rgba(137,151,187,1)
#8997bbff

Eén omzetting geeft je RGB, HSL, HSV, RGBA en HEXA van acht cijfers, zodat je kunt kopiëren wat je app verwacht.

Veelvoorkomend gebruik

• Huisstijlkleuren omzetten voor ontwerptools die RGB gebruiken.
• rgba()-kleuren met transparantie schrijven in CSS.
• Kleuren instellen in code, grafieken of Office-documenten.
• Kleuren gelijk houden tussen apps.
• Huisstijlkleuren invoeren in apps die alleen RGB accepteren, zoals sommige videobewerkers en kantoorprogramma's.
• Een halfdoorzichtige overlay instellen in CSS met rgba().
• HSL gebruiken om een lichtere of donkerdere tint van dezelfde kleur te maken.

Tips en goed om te weten

• HEX van drie cijfers zoals #FFF wordt #FFFFFF, en dat is rgb(255, 255, 255).
• Voor transparantie gebruik je rgba(137, 151, 187, 0.5) voor 50% dekking.
• Voor alle andere formaten (HSL, HSV en meer) gebruik je de kleurconverter. Voor de omgekeerde richting gebruik je RGB naar HEX.

Bijzondere gevallen en beperkingen

• De # is verplicht. Alleen 8997BB wordt geweigerd.
• De uitvoer heeft geen spaties na de komma's. Zowel rgb(137,151,187) als rgb(137, 151, 187) is geldige CSS.
• Ongeldige cijfers (alles behalve 0–9 en A–F) geven een foutmelding in plaats van een gok.
• Verkorte notatie van vier cijfers met alfa (#f008) wordt niet ondersteund; schrijf hem uit tot acht cijfers.

Veelgestelde vragen

Hoe zet ik HEX om naar RGB?

Splits de HEX-code in drie paren en reken elk paar om van het zestientallige naar het tientallige stelsel. #FF8000 wordt 255, 128, 0.

Is HEX hetzelfde als RGB?

Ze beschrijven dezelfde kleuren; HEX is gewoon een compacte, hexadecimale schrijfwijze van de RGB-waarden.

Wat is #000000 in RGB?

rgb(0, 0, 0), en dat is zwart.

Kan HEX transparantie bevatten?

Ja, HEX van acht cijfers voegt alfa toe als laatste paar, bijvoorbeeld #8997BB80.

Wat betekenen de waarden HSL en HSV?

Beide beschrijven de tint (de kleurhoek, 0–360), de verzadiging en ofwel de lichtheid (HSL) of de helderheid (HSV). Alleen het laatste getal veranderen geeft een lichtere of donkerdere versie van dezelfde kleur.

Gerelateerde tools

• RGB naar HEX: Zet RGB-kleurwaarden eenvoudig om naar HEX met deze handige converter.
• Kleurconverter: Zet je kleur om naar meerdere andere formaten.
• Kleurkiezer: De makkelijkste manier om een kleur uit het kleurenwiel te kiezen en de resultaten in elk formaat te krijgen.
• Hexconverter: Zet tekst om naar hexadecimaal en andersom voor elke invoer.
• Afbeeldingen comprimeren: Comprimeer en optimaliseer afbeeldingen voor een kleiner bestand met behoud van hoge kwaliteit.