RGB naar Hex converter

Wat is een RGB naar Hex converter?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Kernfuncties

Alternatieven voor de RGB naar Hex converter

Voorbeelden van RGB naar Hex

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Gangbare RGB → Hex conversies

Referentietabel van de 10 meest-geconverteerde RGB-tuples en hun hex-equivalenten — pure primaire kleuren, pure secundaire kleuren, en twee echte merkkleuren uit het Tailwind-palet.

Zo gebruik je de RGB naar Hex converter

1. 1

   Typ of plak een RGB-tuple in het RGB-veld

   Drop elke rgb()-waarde in het RGB-invoerveld — moderne ruimte-gescheiden rgb(255 87 51), legacy-komma rgb(255, 87, 51), met alpha via slash rgb(255 87 51 / 0.5) of via de rgba(255, 87, 51, 0.5)-vorm, of percentagechannels rgb(100% 34% 20%). De tool normaliseert alle invoervormen naar dezelfde interne RGB-tuple voor het berekenen van hex. Ongeldige tekens, integers buiten het bereik, of verkeerde syntax produceren een rustige inline foutmelding; geldige RGB werkt elk ander formaatveld in realtime bij.

2. 2

   Lees de hex-code af in het HEX-veld

   Het HEX-veld boven het RGB-veld toont de matchende hex-waarde: #FF5733 voor een dekkende kleur, #FF573380 voor een kleur met alpha (8-cijferige vorm). De uitvoer gebruikt standaard hoofdletter-hex-cijfers voor consistentie met de meeste brand guidelines; kleine letters (#ff5733) zijn één mechanische replace verwijderd en even geldige CSS. De conversie is bit-exact — een round-trip RGB → HEX → RGB herstelt de originele tuple letterlijk zonder float-drift.

3. 3

   Klik op Kopiëren om de hex-string te pakken

   Elke formaatkaart heeft een Kopiëren-knop aan de rechterkant. Eén klik en de waarde belandt op je klembord — het knoplabel springt kort op "Gekopieerd!" zodat je het weet. De gekopieerde string bevat de leidende # zodat hij rechtstreeks plakt in een CSS-regel, een Figma-kleurveld, een SwiftUI hex-extension, of een Android colors.xml. Voor platformspecifieke syntax (SwiftUI Color(red:green:blue:), Compose Color(0xFF...), Tailwind v4 @theme-tokens) gebruik je de sectie Copy as code onder de picker.

4. 4

   Ook zichtbaar: HSL, OKLCH, OKLAB, CMYK, named color

   Dezelfde RGB die je plakt licht ook de andere formaatvelden op — HSL voor legacy CSS, OKLCH en OKLAB voor perceptueel-uniforme design systems, HSV en HWB voor designer-color-picker-workflows, CMYK voor printschattingen, en de dichtstbijzijnde CSS named color voor documentatie en proza. Je zit nooit alleen vast aan RGB → hex; als je ook de OKLCH-triple nodig hebt voor een Tailwind v4 @theme-blok, staat die meteen in het OKLCH-veld met zijn eigen Kopiëren-knop.

5. 5

   Gebruik de picker voor visuele aanpassingen

   Onder de formaatgrid zit een SL-vierkant + hue-slider + alpha-slider voor visuele exploratie. Sleep een control en elk tekstveld werkt in realtime bij, inclusief de RGB en HEX waarmee je begon. Op Chromium-gebaseerde browsers (Chrome, Edge, Brave) activeert de EyeDropper-knop de native EyeDropper-API om elke pixel op het scherm te samplen, ook buiten het browserscherm — handig als je een RGB-tuple wilt pakken uit de UI van een andere app zonder eerst een screenshot te maken, en daarna direct de hex aflezen.

Veelgemaakte fouten bij RGB / Hex

padStart overslaan:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produceert ongeldige 5-tekens-hex.

Gebruik padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Geldige 6-tekens-hex; werkt correct voor alle channel-waarden 0-255.

Afronding overslaan:
(0.5 * 255).toString(16) → '7f.8'
Produceert ongeldige hex met een decimaalteken.

Rond eerst naar integer:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Geldig 2-cijferig hex-paar; matcht CSS Color 4-normalisatie.

Emit Android leading-alpha-hex naar CSS:
rgb(255 87 51 / 0.5) → #80FF5733 (Android-formaat)
CSS parset als alpha=128, R=255, G=87, B=51 — totaal verkeerde kleur.

Gebruik het gedocumenteerde formaat van het doelplatform:
voor CSS: #FF573380 (alpha als laatste byte)
voor Android Compose: Color(0x80FF5733) (alpha als eerste byte)
Kruisplak niet tussen de twee zonder opnieuw te ordenen.

Gamma-encoded RGB direct middelen:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Oogt als donkere olijfkleur, niet helder geel.

Middelen in linear-RGB:
decodeer → linear-RGB → middel → codeer opnieuw → rgb(188, 188, 0)
Zichtbaar helder geel, matchend met wat fysieke lichtmenging produceert.

Wie gebruikt RGB naar Hex

Frontend-devs converteren canvas-RGB naar CSS-hex

Canvas API-tekenfuncties rapporteren en accepteren kleuren als RGB-tuples (ctx.fillStyle = 'rgb(255 87 51)'), maar de omliggende CSS-stylesheet wil hex-variabelen (--color-fill: #FF5733). De RGB één keer plakken levert de matchende hex op, klaar om in een CSS custom property te droppen. Handig bij het extraheren van merkkleuren uit een canvas-gerenderde grafiek of datavisualisatie voor hergebruik in statische UI.

Designers converteren Photoshop-RGB naar Figma-hex

Adobe's Color picker (in Photoshop, Illustrator en InDesign) rapporteert RGB als drie 0-255-integers over drie channel-vakjes. Figma daarentegen toont kleurwaarden standaard als hex in zijn designpanelen. Plak de drie Photoshop-integers als rgb(...) hier, kopieer de hex-uitvoer, drop in Figma's kleurveld. Matcht de originele Photoshop-kleur exact zonder de omweg via screenshot en eyedropper.

Hardware-devs converteren LED-sensor-RGB naar web-hex

Adresseerbare LED-strips, kleursensoren en hardware-RGB-camera's rapporteren allemaal channel-waarden als 0-255-integers. Wanneer de metingen een webdashboard moeten aandrijven ("de lamp gloeit nu in deze kleur"), is de matchende hex-code wat het CSS style="background: ..."-attribuut verwacht. Plak de RGB-triple van de sensor, kopieer de hex, plug in de dashboard-markup.

Game-devs exporteren Unity-kleur naar web-mockup

Unity's Color- en Unreal's FLinearColor-constructors nemen genormaliseerde 0-1-floats; elke vermenigvuldigen met 255 geeft de matchende RGB-integers. Plak het resulterende rgb(...) hier, kopieer de hex, drop in de web-mockup of marketingsite die de in-game accentkleur exact moet matchen. De simultane OKLCH-weergave toont ook de waargenomen helderheid zodat het mockup-palet met de hand kan worden afgestemd op de helderheidsniveaus van het spel.

Toegankelijkheidsengineers auditen Photoshop-merkkleuren

Wanneer de merk-stijlgids kleuren rapporteert als RGB-integer-triples ("het merkoranje is RGB 255 / 87 / 51") maar de WCAG-audittool hex-codes wil, is deze converter de brug. Plak de RGB-triple, kopieer de hex, draai door de audit. De WCAG- en APCA-contrast-badges in deze tool tonen ook het verdict in één stap, zodat je niet tussen drie aparte tools hoeft te springen.

E-mail-devs migreren rgba() naar 8-cijferige hex

Moderne e-mailclient-HTML ondersteunt 8-cijferige hex (#FF573380) voor kleuren met alpha, maar legacy-sjablonen slaan dezelfde waarde vaak op als rgba(255, 87, 51, 0.5). De rgba() hier plakken en de 8-cijferige hex-uitvoer aflezen maakt de migratie mechanisch. Het HEX-veld toont #FF573380 voor het 50%-alpha-geval; de legacy rgba()-vorm blijft in het RGB-veld voor fallback-contexten die het nog nodig hebben.

Developers documenteren merk-tokens met beide formaten

Design-token-documentatie toont vaak dezelfde kleur in beide RGB- en hex-vormen: hex voor het CSS-codeblok, RGB voor de proza-vermelding ("het merkoranje is #FF5733, equivalent aan RGB 255 / 87 / 51"). Beide naast elkaar zichtbaar laat een doc-schrijver elk in één pass kopiëren in plaats van twee aparte tools te draaien. Met de deelbare URL-hash kunnen lezers ook doorklikken naar de exact besproken kleur.

QA-engineers asserteren pixel-kleuren tegen hex-specs

Visuele-regressietests pakken soms pixelkleuren als RGB-integers (expect(pixel).toMatchRgb([255, 87, 51])), terwijl de onderliggende spec in hex wordt gegeven ("buttons moeten als #FF5733 renderen"). De vastgelegde RGB hier plakken levert de matchende hex op, die de QA-engineer rechtstreeks kan vergelijken met de spec. De bit-exactheid van de conversie betekent dat de vergelijking niet flakey wordt door float-drift-verschillen.

Wiskunde & serialisatie van RGB naar Hex

toString(16).padStart(2, '0') is de one-line-implementatie

De hele RGB-naar-hex-conversie past in één expressie per channel: value.toString(16).padStart(2, '0'). JavaScript's toString(16) converteert een decimaal integer naar zijn grondtal-16-string-representatie. Het padStart(2, '0') is het makkelijk-te-vergeten detail — zonder dat zou channel-waarde 5 serialiseren als '5' in plaats van '05', wat een ongeldige 5-tekens-hex zoals #55733 oplevert wanneer aan elkaar geplakt met de andere channels. Het standaard-idioom is [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('') gevolgd door een '#'-prefix.

Percentage-normalisatie: × 255 / 100, daarna afronden

CSS Color 4 staat percentagechannels toe in rgb(): rgb(100% 34% 20%) is equivalent aan rgb(255 87 51). De normalisatieregel is Math.round(percent × 255 / 100). 50% × 255 / 100 = 127,5 rondt af naar 128 (banker's rounding weg van .5). Dezelfde regel geldt voor alpha wanneer uitgedrukt als percentage (rgb(255 87 51 / 50%) ↔ rgb(255 87 51 / 0.5)). Integer- en percentage-vormen produceren identieke hex-uitvoer na normalisatie; de tool toont de canonieke integer-vorm in het RGB-veld na hernormalisatie.

Alpha naar hex: vermenigvuldig met 255, rond af, codeer als laatste paar

RGB met alpha (rgb(255 87 51 / 0.5)) emit 8-cijferige hex door alpha met 255 te vermenigvuldigen, af te ronden naar het dichtstbijzijnde integer, en te coderen als een 4e hex-paar toegevoegd na RGB. 0.5 × 255 = 127,5, afgerond naar 128 = 0x80, uitvoer #FF573380. De CSS Color 4-spec gebruikt banker's-rounding (rond-half-naar-even) voor deze conversie, wat de tool volgt. De 8-cijferige vorm valt terug op 6-cijferige wanneer alpha exact 1 is, om te voorkomen dat trailing FF-paren in stylesheets lekken.

RGB-invoer: zowel CSS Color 4 ruimte-gescheiden als legacy-komma geaccepteerd

De parser accepteert zowel de moderne CSS Color 4-vorm rgb(255 87 51) als de legacy CSS 1-vorm rgb(255, 87, 51). De moderne vorm sluit aan bij de andere functionele notaties van CSS Color 4 (hsl(), lab(), oklch(), color()) die allemaal ruimte-scheiding en slash-voor-alpha gebruiken. De legacy-kommavorm wordt nog steeds ondersteund in elke evergreen-browser en blijft gangbaar in oudere codebases. Beide produceren identieke hex-uitvoer; de hex-serializer van de tool maakt niet uit welke invoervorm arriveerde.

OKLCH als interne bron van waarheid voor round-trip-stabiliteit

Hoewel deze spoke specifiek RGB → HEX target, houdt de gedeelde onderliggende converter de canonieke kleur intern aan als OKLCH-triple. Dit betekent dat RGB → HEX → HSL → OKLAB → CMYK → RGB round-trips zonder per-stap float-drift verlopen; legacy-converters die via HSL of sRGB als pivot routen stapelen per-stap-afrondingsfouten op. De keuze voor OKLCH (boven OKLAB) behoudt Hue als stabiele as zodat het slepen van de hue-slider niet per ongeluk door grijs crossfadet. Per Björn Ottossons OKLAB-paper uit 2020.

Channel-codering: 8-bit unsigned, sRGB gamma-encoded

Elke RGB-channel is een 8-bit unsigned integer (0-255), gecodeerd in de sRGB-kleurruimte gedefinieerd door IEC 61966-2-1 (1996). De waarden zijn *gamma-encoded* — wat betekent dat de relatie tussen channel-waarde en waargenomen helderheid niet-lineair is, volgens de stukgewijze sRGB-transferfunctie (ruwweg een 2,4-exponent met een klein lineair segment rond nul). Dit doet ertoe wanneer je kleurwiskunde doet: het middelen van twee RGB-waarden in hun gamma-encoded vorm geeft het verkeerde perceptuele middelpunt. Voor correcte kleurmenging decodeer je eerst naar linear-RGB (CSS Color 4 §11.2), middel je daarna, en codeer je vervolgens opnieuw. Het OKLCH-interne model van de tool maakt dit transparant.

Aanbevolen aanpak voor RGB / Hex-workflows

Geef hoofdletter-hex de voorkeur in brand guidelines, kleine letters in code

Brand guidelines, marketing-PDF's en designer-gerichte documentatie gebruiken typisch hoofdletter-hex (#FF5733) voor visuele consistentie — de all-caps-look leest als merkidentificatie. Code (CSS, JSON, JavaScript-bron) gebruikt typisch kleine letters (#ff5733) volgens conventie omdat kleine letters sneller te typen zijn en gangbaarder in autogegenereerde linter-uitvoer. Beide zijn geldige CSS en parsen identiek; kies er één voor elke context en blijf consistent. De tool emit standaard hoofdletters; één mechanische replace schakelt naar kleine letters.

Emit 8-cijferige hex alleen wanneer alpha < 1

Wanneer alpha gelijk is aan 1 (volledig dekkend), val terug op de 6-cijferige vorm. Een trailing FF-paar (#FF5733FF) is legale CSS maar maakt stylesheets visueel rommelig en verwart sommige legacy-parsers tot mis-rendering. De 8-cijferige vorm zou alleen moeten verschijnen wanneer alpha betekenisvol transparant is. Deze tool volgt die regel automatisch — dekkende kleuren emitten 6-cijferige hex, kleuren met alpha emitten 8-cijferige hex, en de scheidslijn is exact (alpha = 1.0 emit 6 cijfers; alpha = 0,9999 emit 8 cijfers om de data te behouden).

Middel RGB-channels niet direct voor kleurwiskunde

RGB-channels zijn gamma-encoded — het middelen van twee RGB-waarden geeft het verkeerde perceptuele middelpunt. (255, 0, 0) gemiddeld met (0, 255, 0) produceert (127, 127, 0), een troebele donkere olijfkleur, niet het visueel-heldere geel-middelpunt dat je zou verwachten. Voor correcte kleurmenging decodeer je eerst naar linear-RGB (CSS Color 4 §11.2), middel je daarna, en codeer je vervolgens opnieuw. Of, beter, werk in OKLAB of OKLCH waar perceptuele afstand uniform is — dat is precies wat design-system-paletgeneratoren doen.

Geef hex de voorkeur voor CSS-variabelen, RGB voor hardware

Wanneer je een CSS custom property of een Tailwind-configtoken schrijft, geef hex de voorkeur — het is beknopter en past schoon in JSON of YAML. Wanneer de consumerende code per-channel-rekenkunde doet (canvas-aanroepen, beeldmanipulatie, hardware-LED-drivers, OpenGL-kleurattributen) is de RGB-integer-vorm sneller te consumeren. De twee formaten beschrijven dezelfde kleur; de keuze gaat puur over wie leest en schrijft, niet over correctheid. De simultane-veldweergave van deze tool maakt beide even goedkoop.

Valideer alpha-bereik voor vermenigvuldiging met 255

Bij het implementeren van je eigen RGB → 8-cijferige-hex-converter, valideer dat de alpha-float binnen [0, 1] valt voor de × 255-stap. Alpha buiten het bereik (negatief of > 1) produceert stilletjes ongeldige hex-paren die sommige parsers accepteren en sommige afwijzen — een breekbaar falingsmodel. Clamp eerst (Math.max(0, Math.min(1, alpha))), vermenigvuldig daarna, rond af, en codeer als hex. De tool toont een rustige inline foutmelding voor alpha buiten het bereik in plaats van een gebroken hex-string te emitten.

Gebruik de URL-hash om live kleurbeslissingen te delen

Elke kleurwijziging werkt de URL-hash bij als #hex=ff5733 automatisch. Kopieer de URL naar een Slack-thread of GitHub-issue en iedereen die hem opent landt op dezelfde kleur met dezelfde hex. Dit is betrouwbaarder dan een RGB-tuple in chat plakken — ontvangers typen soms komma's verkeerd of laten een channel weg bij handmatige invoer — en laat een design-review-thread verwijzen naar een exacte kleur in plaats van "het oranje dat we dinsdag bespraken". De hash wordt nooit naar de server verzonden.

Veelgestelde vragen