Hoe HEX-kleurcodes naar RGB te converteren
HEX en RGB zijn twee manieren om exact dezelfde kleuren te schrijven. Designers en ontwikkelaars jongleren constant tussen beide — HEX in CSS-stijlbladen, RGB in JavaScript-animaties, HSL in design-tools. Hun verband begrijpen maakt het werken met kleuren veel eenvoudiger.
Hoe HEX werkt
Een HEX-kleurcode zoals #FF5733 is een 6-cijferig hexadecimaal getal dat de rode, groene en blauwe kanalen vertegenwoordigt:
| Deel | Hex | Decimaal | Kanaal |
|---|---|---|---|
| FF | FF | 255 | Rood |
| 57 | 57 | 87 | Groen |
| 33 | 33 | 51 | Blauw |
Elk kanaal gaat van 00 (0, geen kleur) tot FF (255, maximale intensiteit). Dus #FF5733 betekent rood op vol, gematigd groen, een beetje blauw — wat een warm oranjerood geeft.
Hoe HEX naar RGB te converteren
- Voer uw HEX-code in — typ of plak een code zoals #FF5733, of gebruik de kleurkiezer.
- Bekijk de RGB-waarden — zie de equivalenten in rood, groen en blauw (0-255 elk).
- Kopieer in elk formaat — haal de waarden op in
rgb(255, 87, 51), individuele kanalen of andere formaten zoals HSL.
Veelvoorkomende kleurcodes
| Kleur | HEX | RGB |
|---|---|---|
| Wit | #FFFFFF | rgb(255, 255, 255) |
| Zwart | #000000 | rgb(0, 0, 0) |
| Rood | #FF0000 | rgb(255, 0, 0) |
| Groen | #00FF00 | rgb(0, 255, 0) |
| Blauw | #0000FF | rgb(0, 0, 255) |
| Geel | #FFFF00 | rgb(255, 255, 0) |
Tips
- Gebruik HEX in CSS —
color: #FF5733is schoner en meer voorkomend dancolor: rgb(255, 87, 51)in stijlbladen. - Gebruik RGB voor transparantie — wanneer u semi-transparante kleuren nodig hebt, gebruik
rgba(255, 87, 51, 0.5). Er is geen manier om alpha toe te voegen in standaard HEX (hoewel 8-cijferige HEX bestaat, varieert browser-ondersteuning). - 3-cijferige snelkoppeling —
#F00komt overeen met#FF0000. Gebruik het wanneer elk paar identieke cijfers heeft om plaats te besparen. - De kleurkiezer is sneller — als u op zoek bent naar de juiste kleur, gebruik de visuele kiezer in plaats van HEX-waarden te raden. Kopieer de code eenmaal tevreden.
Veelgestelde vragen
Hoe HEX naar RGB handmatig converteren?
Splits de hex-code in drie paren (bijv. #FF8800 wordt FF, 88, 00). Converteer elk paar van basis 16 naar basis 10. FF = 255, 88 = 136, 00 = 0. Het resultaat is rgb(255, 136, 0).
En de 3-cijferige HEX-codes?
3-cijferige HEX is een snelkoppeling waarbij elk cijfer wordt verdubbeld. #F80 komt overeen met #FF8800. De meeste converters verwerken beide formaten automatisch.
Wanneer HEX of RGB gebruiken?
HEX is compacter en meer voorkomend in CSS. RGB heeft de voorkeur wanneer u kanalen individueel moet manipuleren in code of rgba() moet gebruiken voor transparantie. Beide vertegenwoordigen dezelfde kleuren.
Wat vertegenwoordigt het #-symbool in een HEX-code?
Het hekje (#) is een prefix die aangeeft dat de waarde een hexadecimale kleurcode is. Het maakt geen deel uit van de waarde zelf. Sommige tools accepteren codes met of zonder hekje.