Converteer elke hex-kleurcode naar RGB in je browser — 3-cijferig, 6-cijferig en 8-cijferig hex met alpha worden allemaal ondersteund. Gratis, direct, geen account, je kleuren verlaten de pagina nooit.
Tints
Shades
Tones
Harmonies
— — — — — Een hex naar RGB converter is een klein hulpmiddel dat een hex-kleurcode (`#FF5733`) omzet in de drie integer-channelwaarden die hij representeert (`rgb(255 87 51)`). Hex en RGB zijn de twee formaten waar elke webstylesheet, designtool en image-pixel-pipeline sinds eind jaren 90 omheen is gebouwd, en de conversie ertussen is de meest voorkomende operatie in color tooling. Hex is het beknopte copy-paste-formaat dat Figma, Sketch, Photoshop en elke brand-guidelines-PDF standaard exporteren — een 6-tekens grondtal-16-string die comfortabel in een CSS custom property past en in één oogopslag leesbaar is zodra je oog de patronen leert. RGB is het channel-geadresseerde formaat dat hardware-API's, canvas-tekenaanroepen, image-buffer-manipulatie, OpenGL-kleurattributen en de meeste graphics-SDK's verwachten — drie aparte 0-255-integers (of 0-1 genormaliseerde floats) die direct mappen op de rode, groene en blauwe subpixels van een LCD of de fosforen van een CRT. Converteren ertussen is mechanisch: splits de hex in drie 2-cijferige paren en lees elk paar als een grondtal-16-getal. Deze tool draait die conversie live terwijl je typt, zonder "Converteren"-knop om op te klikken, en toont elk ander gangbaar kleurformaat (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, plus de 148 CSS named colors) gratis naast de RGB-uitvoer.
**Het RGB-formaat zelf verdient nadere beschouwing.** Standaard 24-bit sRGB codeert elke channel als een 8-bit unsigned integer van 0 tot 255 — 256 waarden per channel, in totaal 16.777.216 kleuren (256³). De referentiestandaard is IEC 61966-2-1, de sRGB-specificatie uit 1996, verankerd aan de CRT-fosfor-primaria die displays in die tijd domineerden. CSS exposeert RGB via de `rgb()`-functie in drie syntactische varianten. De originele CSS 1-vorm gebruikt kommascheidingen: `rgb(255, 87, 51)`. CSS Color 4 (W3C Candidate Recommendation sinds 2022) voegde een moderne ruimte-gescheiden vorm toe: `rgb(255 87 51)`, met een optionele alpha-channel na een slash: `rgb(255 87 51 / 0.5)`. Beide vormen zijn uitwisselbaar en shippen in elke evergreen-browser. RGB accepteert ook percentagechannels: `rgb(100% 33% 20%)` is equivalent aan `rgb(255 87 51)`, soms verkozen in handgeschreven stylesheets voor leesbaarheid. Alpha heeft specifiek een aparte `rgba()`-functie voor legacy-ondersteuning — `rgba(255, 87, 51, 0.5)` is de canonieke vorm die overal werkt tot IE 9. CSS Color 4 voegde ook een `color(srgb 1 0.341 0.2)`-syntax toe voor expliciete sRGB-adressering, en parallelle `color(display-p3 ...)`- en `color(rec2020 ...)`-functies voor wide-gamut-waarden die hex niet kan coderen.
De conversie-wiskunde gaat schoon in beide richtingen. **HEX naar RGB**: parse de 6-cijferige hex `#RRGGBB` als drie 2-cijferige grondtal-16-getallen via `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)`. Voor 3-cijferige verkorte vorm `#RGB` breid je elk cijfer uit door het te verdubbelen (`#F73` → `#FF7733`) voordat je parset — dit is *geen* left-pad. Voor 8-cijferige alpha `#RRGGBBAA` parse je het laatste paar op dezelfde manier en deel je door 255 om de 0-1 alpha-float te krijgen. Voor 4-cijferige alpha-verkorte vorm `#RGBA` breid je elk cijfer eerst uit (`#F738` → `#FF773388`). **RGB naar HEX** is het omgekeerde: voor elke channel roep je `value.toString(16).padStart(2, '0')` aan om het 2-cijferige hex-paar te krijgen (het `padStart` is belangrijk — zonder dat zou channel-waarde 5 serialiseren als `'5'` in plaats van `'05'`, wat ongeldige hex oplevert), en plak je ze daarna aan elkaar. Beide richtingen zijn bit-exact in beide richtingen: 16² = 256, precies passend op de 0-255 byte-range die elke channel inneemt, dus een HEX → RGB → HEX round-trip produceert de originele invoer letterlijk zonder float-drift.
**Waarom hex versus RGB?** Hex is korter, design-tool-native en het formaat dat je oog na verloop van tijd leert — de meeste front-end-developers herkennen `#3b82f6` als Tailwind blue-500 op het zicht. RGB is expliciete-channel-adressering, makkelijker om mee te rekenen in JavaScript, en de enige van de twee die alpha en percentages schoon accepteert. De twee formaten bestaan naast elkaar omdat ze verschillende problemen oplossen. Web-stylesheets en brand guidelines neigen naar hex omdat copy-paste-kosten domineren. Canvas-tekenaanroepen, beeldbewerking, hardware-LED-API's en alle code die per-channel-rekenkunde doet neigen naar RGB omdat indexeren in een tuple sneller is dan slicen op een string. De wissel tussen de twee gebeurt tientallen keren in een typisch webproject — plak een hex uit Figma, converteer naar RGB-integers voor een `ctx.fillStyle = ...`-aanroep, converteer terug naar hex voor een CSS-variabeledefinitie.
Deze tool's HEX → RGB-workflow is één richting van een 5-spoke-familie die allemaal dezelfde onderliggende unified color converter delen. De aparte unified color converter is de hub — hij toont alle 9 formaten tegelijk bewerkbaar en is de juiste tool wanneer je workflow meer dan alleen hex en RGB nodig heeft. De eenrichtings-spokes richten zich op specifieke Google-zoekintenties: de omgekeerde RGB naar hex converter voor de inverse richting, de hex naar HSL converter voor de legacy designer-cognitieve ruimte, de hex naar OKLCH converter voor moderne perceptueel-uniforme design systems (Tailwind v4 en shadcn defaulten nu allebei naar OKLCH), en de hex naar CMYK converter voor printvoorbereidings-benaderingen. Alle vijf spokes en de hub delen dezelfde parsing engine en dezelfde conversie-wiskunde, dus de resultaten zijn gegarandeerd identiek over de familie. Elke conversie draait lokaal in je browser — je hex-codes worden nooit geüpload, nooit gelogd, en nul netwerkverzoeken vuren terwijl je typt. Verifieer in DevTools.
// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
let h = input.trim().replace(/^#/, '');
// Expand 3-digit and 4-digit shorthand by duplicating each digit
if (h.length === 3 || h.length === 4) {
h = h.split('').map(c => c + c).join('');
}
if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
throw new Error(`Invalid hex: ${input}`);
}
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
return [r, g, b, a];
}
console.log(parseHex('#FF5733')); // [255, 87, 51, 1]
console.log(parseHex('#F73')); // [255, 119, 51, 1]
console.log(parseHex('#FF573380')); // [255, 87, 51, 0.5019607843137255] 3-cijferig `#F73`, 4-cijferig alpha `#F738`, 6-cijferig `#FF5733`, 8-cijferig alpha `#FF5733CC`, plus de variant zonder `#` voor elk daarvan (`F73`, `FF5733`, etc.). De parser normaliseert ze allemaal naar dezelfde interne RGB-tuple vóór weergave, zodat je elke vorm die je bron gebruikt kunt plakken zonder eerst handmatig de verkorte vorm uit te breiden. Hoofdletters worden ook genormaliseerd — `#ff5733` en `#FF5733` produceren identieke uitvoer.
Het RGB-veld toont de waarde in de moderne vorm van CSS Color 4: `rgb(255 87 51)` voor dekkende kleuren, `rgb(255 87 51 / 0.5)` voor kleuren met alpha. Beide vormen werken in elke evergreen-browser (Chrome 65+, Safari 13+, Firefox 52+). De legacy-kommavorm `rgb(255, 87, 51)` is één mechanische replace verwijderd als je doel het nodig heeft; de moderne syntax heeft de voorkeur in nieuwe code omdat hij aansluit bij de andere functionele syntaxen van CSS Color 4.
HEX → RGB is integer-naar-integer-wiskunde: `parseInt(hex, 16)` geeft een exacte 0-255-waarde zonder float-betrokkenheid. De omgekeerde richting (`.toString(16).padStart(2, '0')`) is even exact. Een round-trip HEX → RGB → HEX → RGB → HEX produceert de originele invoer letterlijk, voor onbepaalde tijd. Doordat OKLCH intern de bron van waarheid is, blijft zelfs de langere keten HEX → RGB → HSL → OKLAB → HEX bit-stabiel, wat legacy-converters die via HSL routen niet garanderen.
8-cijferige en 4-cijferige hex met alpha (`#RRGGBBAA` en `#RGBA`) worden correct geparseerd. Het laatste paar mapt op een 0-1 alpha-float: `00` → 0, `80` → 0,502, `FF` → 1. De uitvoer gebruikt standaard de slash-syntax van CSS Color 4 (`rgb(255 87 51 / 0.5)`); de legacy-vorm `rgba(255, 87, 51, 0.5)` is één replace verwijderd. Handig bij migratie van design-tokens waar alpha-waarden mogelijk in 8-cijferige hex-codes verborgen zijn.
Dezelfde hex die je plakt drijft ook HSL, HSV, HWB, OKLCH, OKLAB, CMYK en de dichtstbijzijnde CSS named color — allemaal in één oogopslag op dezelfde pagina zichtbaar. Je zit nooit alleen vast aan hex → RGB. Als een teamgenoot de OKLCH-triple nodig heeft voor een Tailwind v4-token, de dichtstbijzijnde named color voor documentatie-proza, of de CMYK-benadering voor een printofferte, staan de waarden er al met hun eigen Kopiëren-knoppen.
Geef een hex door en de contrastrij scoort hem direct tegen zowel wit als zwart via WCAG 2.1 (regelgevende ondergrens: 4,5:1 voor lopende tekst, 7:1 voor AAA) en APCA Lc (voorgestelde WCAG 3-opvolger: target `|Lc| ≥ 75` voor lopende tekst). Handig als je net een merk-hex naar RGB hebt geconverteerd en wilt verifiëren dat hij echt leesbaar is als kleur voor lopende tekst voor je 'm ship.
Onder de picker zet de sectie Copy as code de huidige kleur om in plak-klare snippets voor vijf platforms: CSS custom property (`--color-brand: rgb(255 87 51)`), Tailwind v4 `@theme`-token, SwiftUI `Color(red:green:blue:)`-literal, Jetpack Compose `Color(0xFFFF5733)`-constante, Flutter `Color(0xFFFF5733)`. De exacte syntax die elk platform verwacht, klaar om te droppen in een iOS-asset catalog, Android-themabestand of Flutter `ThemeData`.
Alle hex-parsing, RGB-conversie, contrastscoring en paletgeneratie draait lokaal in je browser. Je hex-codes worden nooit verzonden, nooit gelogd op een server, nooit geanalyseerd. Nul netwerkverzoeken terwijl je typt — verifieer in DevTools. Veilig voor onaangekondigde merkpaletten, interne design tokens, concept-mockups onder NDA, en al het andere vertrouwelijke kleurwerk.
De huidige kleur codeert automatisch in de URL-hash als `#hex=ff5733` bij elke wijziging. Kopieer de URL, plak in een Slack-thread of een GitHub-issue, en iedereen die hem opent landt op dezelfde hex met hetzelfde RGB-resultaat. De hash leeft alleen in je adresbalk en wordt nooit naar de server verzonden (browsers nemen URL-fragmenten niet op in HTTP-verzoeken), dus zelfs het delen van de link lekt de kleur niet naar enige derde partij.
Het standaard-Google-resultaat voor "hex to rgb" — een eenrichtings-formulier met hex erin, RGB eruit, geen andere formaten zichtbaar. Handig voor eenmalige opzoekingen wanneer je vanuit zoekresultaten arriveert. Mist OKLCH, contrastchecking, gamutdetectie, alpha-afhandeling en de multi-formaat simultane weergave. Deze tool wint op elke as behalve het bare-bones eenmalige-conversie-geval.
Langlopende per-kleur SEO-pagina's met diepe metadata: conversies, paletten, harmonies, gradients voor elke hex die je opvraagt. UI is gedateerd (begin jaren 2010), geen OKLCH-ondersteuning, geen APCA-contrast, geen wide-gamut-afhandeling. Sterk voor SEO-vondsten van een specifieke hex via Google; zwakker voor actieve conversie-workflows waar typen in een unified-field-UX sneller is.
Beginnervriendelijke HEX/RGB/HSL-toggle op een onderwijs-georiënteerde pagina, alomtegenwoordig in zoekresultaten. Geen OKLCH, geen alpha-afhandeling buiten rgba, geen geavanceerde features. Handig als referentie naast W3Schools' uitleg-content. Deze tool wint op elke andere as: meer formaten, perceptuele wiskunde, gamut + contrast + CVD-features, moderne code-export voor Tailwind v4 / SwiftUI / Compose / Flutter.
Chrome, Firefox en Safari DevTools shippen allemaal een color picker die hex inline naar RGB converteert als je op een kleurstaal in het CSS-paneel klikt. Gratis, geen installatie, altijd beschikbaar. Mist OKLCH, mist deelbare URL's, mist code-export voor niet-webplatforms (SwiftUI, Compose). Pak DevTools als je al CSS debugt; pak deze tool als je cross-platform-uitvoer nodig hebt.
Meegeleverd met elke Mac sinds OS X — hover over een willekeurige pixel en lees de RGB- / hex- / linear-waarden af. Uitstekend voor het samplen van pixelkleuren uit elke app op het scherm. Converteert geen geplakte hex-waarden; het is een scherm-sampler, geen converter. Gebruik de EyeDropper-knop in de picker van deze tool (alleen Chromium-browsers) voor dezelfde scherm-samplingcapaciteit binnen de browser.
Per-kleur SEO-pagina's met veel ruimtes (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Mist moderne OKLCH-ondersteuning en de unified-field-bewerkings-UX. Auto-gegenereerde contentpagina's voelen contentfarm-achtig aan, maar de conversiedata is correct. Goed voor het verkennen van individuele kleurmetadata via Google; deze tool is sneller voor actieve workflows.
#FF5733
RGB-uitvoer: `rgb(255 87 51)`. De klassieke use case — een designer dropt een merkkleur in Figma, je maakt er een screenshot van, een eyedropper geeft je de hex, en nu heb je de channel-integers nodig voor een canvas-tekenaanroep, een hardware-LED-strip of pixel-wiskunde tegen een image buffer. De ruimte-gescheiden syntax van CSS Color 4 die hier wordt getoond is de moderne vorm; de legacy-kommavorm `rgb(255, 87, 51)` is identiek in betekenis en wordt ondersteund in elke browser sinds IE 3.
#3b82f6
RGB-uitvoer: `rgb(59 130 246)`. Adobe's Color picker (in Photoshop, Illustrator en InDesign) accepteert RGB-integers in het 0-255-bereik als zijn native invoer — plak 59 / 130 / 246 in de drie channel-vakjes en je matcht Tailwind's `blue-500` exact. Handig als een designer een webkleur moet uitwerken in een print-aware lay-out-app, of als je merkkleuren samplet naar een swatch library voor beeldbewerking.
#FF573380
RGB-uitvoer: `rgb(255 87 51 / 0.5)`. Het laatste paar (`80`) decodeert als `128/255 ≈ 0.502`, weergegeven als de alpha-channel via de slash-syntax van CSS Color 4. De equivalente legacy-vorm is `rgba(255, 87, 51, 0.5)`, die nog steeds overal wordt ondersteund en die oudere preprocessors verwachten. 8-cijferige hex kwam in 2018 native in alle evergreen-browsers; daarvoor moest alpha worden uitgedrukt via de `rgba()`-functie.
#F73
RGB-uitvoer: `rgb(255 119 51)`. De CSS-spec definieert 3-cijferige hex als verkorte vorm waarbij elk cijfer wordt verdubbeld om het 6-cijferige equivalent te vormen: `#F73` breidt uit naar `#FF7733`, dus R = `FF` = 255, G = `77` = 119, B = `33` = 51. Dit is *geen* left-pad — `#F73` is **niet** `#000F73`. Veel beginners begrijpen dit verkeerd; het uitbreidingsgedrag van de tool maakt de regel in één oogopslag zichtbaar.
Referentietabel van de 10 meest-geconverteerde hex-codes en hun RGB-equivalenten — pure primaire kleuren, pure secundaire kleuren, en twee echte merkkleuren uit het Tailwind-palet.
Puur zwart. Alle drie de channels op nul — de afwezigheid van uitgezonden licht. RGB-triple (0, 0, 0).
#000000 → rgb(0 0 0) Puur zwart op een scherm is zelden de juiste designkeuze — probeer `#111` of OKLCH-lightness 0,1-0,15 voor zachtere lopende tekst.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Puur wit. Alle drie de channels op hun maximumwaarde (255). De helderste kleur in sRGB.
#FFFFFF → rgb(255 255 255) Puur witte achtergronden kunnen oogvermoeidheid produceren in donkere omgevingen — overweeg `#fafafa` of OKLCH 0,98 voor warmere alternatieven.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Puur rood. R-channel op maximum, G en B op nul. De eerste van de drie sRGB-primaire kleuren.
#FF0000 → rgb(255 0 0) Puur rood is sterk verzadigd en past zelden in een merkpalet — de meeste "rode" merkkleuren liggen dichter bij #DC2626 of #E53935.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Puur groen. G-channel op maximum, R en B op nul. CSS named color `lime` (niet `green`, dat is #008000).
#00FF00 → rgb(0 255 0) Het CSS-keyword `green` lost op naar #008000 (half-helder), niet #00FF00 — een veelvoorkomende bron van verwarring. Gebruik `lime` voor puur RGB-groen.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Puur blauw. B-channel op maximum, R en G op nul. De derde sRGB-primaire kleur.
#0000FF → rgb(0 0 255) Puur blauw op een witte achtergrond haalt WCAG AA-contrast niet (3,7:1) — overweeg donkerdere merkblauwen zoals #1D4ED8 (Tailwind blue-700) voor lopende tekst.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Cyaan — groen en blauw op maximum, rood op nul. Een van de drie sRGB-secundaire kleuren. CSS named color `cyan` (of equivalent `aqua`).
#00FFFF → rgb(0 255 255) Cyan en aqua zijn exacte synoniemen in CSS — beide lossen op naar #00FFFF. Kies één en blijf consistent in je stylesheet.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Magenta — rood en blauw op maximum, groen op nul. CSS named color `magenta` (of equivalent `fuchsia`).
#FF00FF → rgb(255 0 255) Magenta en fuchsia zijn exacte synoniemen in CSS — beide lossen op naar #FF00FF. Gangbaar in testpatronen en developer-tool-overlays.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Geel — rood en groen op maximum, blauw op nul. De helderste van de drie sRGB-secundaire kleuren naar waargenomen luminantie.
#FFFF00 → rgb(255 255 0) Geel is de hoogste-luminantie niet-witte kleur op het scherm — gele tekst op witte achtergronden is bijna onzichtbaar, ook al oogt de hex prima op papier.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Tailwind CSS's standaard blue-500-merkkleur — het canonieke "webblauw" van midden jaren 2020. Gebruikt in talloze dashboards, marketingsites en admin-tools.
#3b82f6 → rgb(59 130 246) Tailwind v4 herdefinieert blue-500 in OKLCH (`oklch(0.629 0.193 263.4)`) voor perceptueel-uniforme ramps — de hex blijft hetzelfde als fallback.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Tailwind CSS's standaard rose-500 — een hoog-verzadigd roze-rood dat vaak wordt gebruikt voor accentknoppen, alert-states en merkcontrast.
#f43f5e → rgb(244 63 94) Rose-500 haalt WCAG AA (4,6:1) tegen wit voor grote tekst maar niet voor lopende tekst — combineer met rose-600 (#e11d48) of donkerder voor lopende tekst op wit.
OKLCH nodig in plaats daarvan? Probeer de aparte hex naar OKLCH converter voor perceptueel-uniforme uitvoer.
Drop elke hex-waarde in het HEX-invoerveld — met of zonder de leidende `#`, in 3-cijferige verkorte vorm (`#F73`), 6-cijferige volledige vorm (`#FF5733`), 4-cijferige alpha-verkorte vorm (`#F738`), of 8-cijferige alpha-volledige vorm (`#FF5733CC`). De tool normaliseert alle vijf invoervormen intern naar dezelfde canonieke kleur. Hoofdletters maken niet uit (`#ff5733` en `#FF5733` parsen identiek). Ongeldige tekens of verkeerde cijferaantallen produceren een rustige inline foutmelding; geldige hex werkt elk ander formaatveld in realtime bij.
Het RGB-veld onder het HEX-veld toont de matchende `rgb()`-waarde in de moderne ruimte-gescheiden syntax van CSS Color 4: `rgb(255 87 51)` voor een dekkende kleur, `rgb(255 87 51 / 0.5)` voor een kleur met alpha. Elke channel is een 0-255-integer; alpha is genormaliseerd naar 0-1. De waarden zijn bit-exact — `parseInt('FF', 16)` geeft 255, zonder float-rekenkunde, dus een round-trip terug naar hex produceert de originele invoer letterlijk.
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 is de canonieke CSS Color 4-syntax (`rgb(255 87 51)`); als je doelplatform de legacy-kommavorm nodig heeft, is de conversie mechanisch (vervang spaties door `, `). Voor platformspecifieke uitvoer (SwiftUI, Compose, Flutter, Tailwind v4) gebruik je de sectie Copy as code onder de picker.
Dezelfde hex 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 hex → RGB; als je ook de OKLCH-triple nodig hebt om in een Tailwind v4 `@theme`-blok te droppen, staat die meteen in het OKLCH-veld met zijn eigen Kopiëren-knop.
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 HEX en RGB 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 hex wilt pakken uit de UI van een andere app zonder eerst een screenshot te maken.
3-cijferige verkorte vorm `#RGB` breidt uit door *elk cijfer te verdubbelen*, niet door met nullen te left-padden. `#F73` wordt `#FF7733` (helder oranje), niet `#000F73` (donkerblauw). Dit is de meest-misbegrepen hoek van CSS-kleursyntax; beginners gaan er vaak van uit dat de verkorte vorm een soort nul-pad is en eindigen met wild verkeerde kleuren. Dezelfde regel geldt voor 4-cijferige alpha-verkorte vorm `#RGBA` — elk cijfer verdubbelt om het 8-cijferige equivalent te vormen.
Aanname: #F73 left-padt naar #000F73: verwacht: donkerblauw rgb(0, 15, 115) werkelijk: helder oranje rgb(255, 119, 51)
3-cijferige verkorte vorm verdubbelt elk cijfer: #F73 → #FF7733 → rgb(255, 119, 51) Geverifieerd door de live uitbreiding van de tool terwijl je typt.
RGB terug converteren naar hex vereist dat elke channel's `toString(16)` wordt left-padded naar 2 cijfers. Zonder `padStart(2, '0')` produceren enkele-cijfer-channel-waarden ongeldige hex: `rgb(5, 87, 51)` zou serialiseren als `#55733` (5 tekens) in plaats van `#055733` (6 tekens). Veel ad-hoc-converters slaan de pad over en produceren gebroken uitvoer voor elke channel onder 16. Het standaard-idioom is `value.toString(16).padStart(2, '0')` voor elk van R, G, B.
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. CSS 8-cijferige hex is `#RRGGBBAA` — alpha is het *laatste* paar. Sommige kleurbibliotheken (vooral oudere Android `Color.parseColor()`) gebruiken de tegenovergestelde volgorde `#AARRGGBB` met alpha als *eerste* paar, wat incompatibel is met CSS hex. Een web-hex `#FF573380` (oranje op 50% alpha) geïnterpreteerd als `#AARRGGBB` wordt alpha=255, R=87, G=51, B=128 — een donker cyaan op volledige dekking. Verifieer altijd de alpha-volgorde van het doelplatform voor je 8-cijferige hex round-tript.
Plak CSS 8-cijferige hex in legacy Android Color.parseColor(): #FF573380 geïnterpreteerd als #AARRGGBB → totaal verkeerde kleur en verkeerde alpha.
Gebruik het gedocumenteerde formaat van het doelplatform: voor Android Compose: Color(0xFFFF5733) met alpha als eerste byte voor CSS: #FF573380 met alpha als laatste byte Kruisplak niet tussen de twee zonder opnieuw te ordenen.
RGB-channels zijn gamma-encoded, niet lineair. Het middelen van twee RGB-waarden geeft een perceptueel-verkeerd middelpunt. `(255, 0, 0)` gemiddeld met `(0, 255, 0)` produceert `(127, 127, 0)`, een troebele donkere olijfkleur, niet het heldere geel-middelpunt dat je zou verwachten van het mengen van rood en groen licht. Voor correcte blending decodeer je eerst naar linear-RGB via de sRGB-transferfunctie (CSS Color 4 §11.2), middel je in lineaire ruimte, en codeer je vervolgens opnieuw. Of werk in OKLAB / OKLCH waar perceptuele afstand uniform is.
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.
Omrekentools
Reken je getal direct om tussen binair, hex, decimaal, octaal en elk talstelsel (2-36). Gratis en privé — alles draait in je browser.
Omrekentools
Converteer HEX naar RGB, HSL, OKLCH, OKLAB en CMYK in je browser — kopieer elk formaat met één klik. Gratis, geen account, je kleuren verlaten de pagina nooit.
Omrekentools
Converteer HEX-kleuren naar CMYK in je browser. Naïeve sRGB-gebaseerde benadering voor printvoorbeelden. Gratis, geen account, je kleuren blijven lokaal.
Omrekentools
Converteer elke hex-kleur naar HSL in je browser — 3-cijferig, 6-cijferig en 8-cijferig hex met alpha worden allemaal ondersteund. Gratis, direct, geen account, je kleuren verlaten de pagina nooit.
Omrekentools
Converteer HEX naar OKLCH voor Tailwind v4 design-tokens. Live perceptueel-uniforme uitvoer met Display P3 gamut-waarschuwingen. Gratis, alleen in je browser.
Omrekentools
Comprimeer JPEG, PNG & WebP tot 80% kleiner — in je browser, zonder uploaden. Batch 20 afbeeldingen, stel kwaliteit in, vergelijk voor & na. Gratis & privé.