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