HEX to RGB Converter_
Paste any hex color code — #ff5733, bare ff5733, shorthand #f80, an 8-digit #ff573380, even a code-style 0xFF5733 — and get rgb() back instantly, in both the comma form and the modern space-separated form, because which one you need depends on where you're pasting. A per-pair breakdown shows exactly how each hex pair became each channel number.
Need rgba from a plain 6-digit code? Type the opacity into the Alpha box and the rgba() is built for you; codes that already carry an alpha pair convert it precisely (and the box shows what that pair means). Swatch on a checkerboard, picker for when you're starting from nothing, a copy button on every row.
Reading hex color codes as numbers
What a hex code says, pair by pair
To convert from hex to RGB you split the code into two-character pairs and read each pair as a base-16 number: position one and two are red, three and four green, five and six blue. #ff5733 splits into ff, 57, 33 — which are 255, 87, and 51 — so the CSS equivalent is rgb(255, 87, 51). The hash is decoration; some codebases hand you 0xFF5733 instead, and this page reads that too. Whatever wrapper it arrives in, an rgb hex to rgb conversion never touches the color itself — only the notation.
The pair arithmetic, worked once
A pair's value is its first digit times 16 plus its second digit, where a through f stand for 10 through 15. Take #ff5733: ff is 15 × 16 + 15 = 255; 57 is 5 × 16 + 7 = 87; 33 is 3 × 16 + 3 = 51. The breakdown strip under every result here performs this exact expansion for the code you pasted, so hex to rgb conversion stops being a lookup and becomes something you can verify at a glance — the highest pair possible, ff, is 255, and 00 is zero.
Hex to rgba — where the fourth pair comes from
An 8-digit code carries opacity in its last pair, mapped from 00–ff onto CSS's 0–1: #ff573380 converts to rgba(255, 87, 51, 0.502), because 80 is 128 of 255. More often, though, you're holding a plain 6-digit brand code and *want* transparency — that's what the Alpha box is for: type 0.4 or 40% and the rgba() is assembled without editing the hex by hand. The alpha translation table below maps the common opacity levels between all three spellings, which is the lookup the "hex to rgba" search is usually after.
Shorthand, and doing it in code
Three-digit codes like #f80 are compression: each digit doubles, so #f80 is #ff8800 — never #f08000 or a truncation. Four digits add a doubled alpha the same way. In JavaScript the conversion is parseInt(hex.slice(1, 3), 16) per channel; Python reads int(h[1:3], 16); and when a color from hex to rgb needs to travel onward into canvas fills, WebGL uniforms, or native APIs, it's these integer components — not the string — that the API wants. Convert from hex to rgb once at the boundary and pass numbers after that.
How to use
- 01Paste the code — with or without the
#, shorthand or full, 8-digit, or0x-prefixed from source code. The hex to rgb convert runs on every keystroke and the breakdown strip shows each pair becoming each channel. - 02For transparency on a 6-digit code, put the opacity in the Alpha box (0–1 or a percentage) — the rgba() output is built from both. Codes with their own alpha pair take precedence, and the box displays the decoded value.
- 03Copy the syntax your destination wants: classic
rgba(255, 87, 51, 0.5)for broad compatibility, or the modernrgb(255 87 51 / 0.5)for current CSS. Normalized hex, hsl(), HSV, and CMYK rows are there when the conversion continues. - 04Starting without a code? The picker feeds the same pipeline — pick, then fine-tune the hex it writes into the input.
Four hex-to-rgb moments
A brand code into a canvas API
fillStyle takes the string, but pixel math needs components — the breakdown hands you all three.
#0052cc
r 0 · g 82 · b 204
An overlay at 40% from a 6-digit code
Design says 'brand at 40%' — hex plus the Alpha box, no manual math.
#ff5733 · 40%
rgba(255, 87, 51, 0.4)
A legacy shorthand deciphered
An old stylesheet says #fc0 — the expansion rule answers what full code that actually is.
#fc0
#ffcc00 → rgb(255, 204, 0)
Porting a mobile ARGB value
An Android color 0x80FF5733 has alpha FIRST — convert the RGB part here, then compare against the ordering gotcha below.
0xFF5733 + alpha 0x80
#ff573380 (alpha LAST on the web)
The four hex forms
| Form | Example | What it encodes | As rgb() |
|---|---|---|---|
| 3-digit | #f80 | Shorthand — each digit doubles (#ff8800) | rgb(255, 136, 0) |
| 4-digit | #f80c | Shorthand + doubled alpha (cc ≈ 0.8) | rgba(255, 136, 0, 0.8) |
| 6-digit | #ff5733 | The standard: one pair per channel | rgb(255, 87, 51) |
| 8-digit | #ff573380 | Standard + alpha pair (80 ≈ 0.5) | rgba(255, 87, 51, 0.502) |
All four are valid CSS today. The 5- and 7-digit lengths do not exist — this page names the valid lengths when you land on one.
Alpha, translated between its three spellings
| Opacity | CSS 0–1 | Hex pair |
|---|---|---|
| 100% | 1 | ff |
| 90% | 0.9 | e6 |
| 75% | 0.75 | bf |
| 50% | 0.5 | 80 |
| 25% | 0.25 | 40 |
| 10% | 0.1 | 1a |
| 0% | 0 | 00 |
The hex pair scale has 256 steps and the decimals shown are conventions rounded onto it — which is why a decoded pair can come back as 0.502 rather than the 0.5 you wrote. The gotchas explain.
Tips & best practices
- Grab hex straight out of source: the
0xprefix parses here, so a value copied from Kotlin or C doesn’t need editing first. - When a stylesheet must support old engines, prefer the rgba() row over 8-digit hex — the decoded meaning is identical and the syntax is understood everywhere.
- The modern space syntax and the comma syntax are the same color; pick by codebase convention, not by browser worry — both are universally supported for rgb.
- If a pasted 8-character value renders as the wrong color entirely, suspect ARGB ordering from a mobile codebase — see the gotcha before assuming the code is corrupt.
- Expanding shorthand yourself? Double the digits, never pad with zeros: #f80 is #ff8800; #f80000 is a different (much redder) color.
- For batches of codes in a build script, do the conversion in code (parseInt per pair) rather than one-by-one here — this page is for reading and checking, the one-liner is for pipelines.
Gotchas — where hex codes mislead
An ignored alpha pair renders fully opaque
Engines that predate 8-digit hex don’t error on #ff573380 — they either drop the whole declaration or read it without the transparency, and a half-transparent overlay silently becomes a solid block. When the audience includes old engines or email clients, ship the rgba() form this page emits beside every 8-digit conversion.
#RGBA on the web, #ARGB on Android and Flutter
CSS puts the alpha pair last; Android, Flutter, and several Windows APIs put it first. The same eight digits are two different colors depending on platform — 0x80FF5733 is half-transparent orange on Android and a mostly-transparent teal-ish value if pasted into CSS. When porting mobile constants, move the first pair to the end before converting.
Alpha decimals and hex pairs don’t align exactly
The pair scale has 256 steps; 0.5 has no exact step, so it stores as 80 and decodes as 0.502. Round-tripping repeatedly is stable — the drift happens once, at the first quantization — but string-comparing alphas across the two notations will always find these off-by-a-step values. Compare the pair bytes, not the decimals.
The digits say how much red — not which red
A hex code is sRGB by convention, not by declaration: nothing in the string records a color space. The moment a design spec starts naming display-p3 or wide gamut, the same six digits describe a different visible color, and CSS color() syntax — not hex — is the container that can say so.
Bare 3-digit values are genuinely ambiguous
Is 255 a number or the color #255 (a dark teal)? Without the hash there is no way to know, so this page refuses to guess: bare 6- and 8-character strings parse as hex, bare 3-digit all-numeric strings do not. Add the # when you mean the color and the ambiguity disappears.
Technical details
- Accepted input
- Hex with 3, 4, 6, or 8 digits; # and 0x prefixes optional; whitespace and case ignored. Pasted rgb()/hsl() forms convert too, with a pointer to the owning page
- Alpha
- 4/8-digit pairs decode to exact 0–1 values (pair ÷ 255); the Alpha box applies 0–1 or percentage opacity onto alpha-less codes and syncs to show a decoded pair
- Output
- rgba()/rgb() comma syntax, modern space syntax with slash alpha, normalized hex with the short form when collapsible, hsl(), HSV, device-CMYK — per-row copy
- Breakdown
- Every conversion shows its pair arithmetic (ff → 255 · 57 → 87 · 33 → 51), with the doubling rule named for shorthand input
- Errors
- Non-hex characters are named ("g" is not a hex digit); wrong lengths name the valid ones (3, 4, 6, 8); bare numeric strings are refused rather than guessed
- Fidelity
- Same full-precision engine as the RGB to HEX converter — outputs pasted back there reproduce the identical hex, verified in tests and in the browser
- Scope
- Color-name lookup, shades/tints, and contrast checking are out; hsl-to-hex is queued on this engine; gradients belong to a planned generator
- Processing
- Every conversion, the breakdown, and the preview run locally in your browser — pasted codes never leave the page
FAQ
How do I convert hex to RGB?
Split after the # into two-character pairs and read each as base 16: first digit × 16 + second digit, with a–f meaning 10–15. #ff5733 → 255, 87, 51 → rgb(255, 87, 51). Or paste it above and read the breakdown strip, which shows that arithmetic for your exact code.
How do I get rgba() from a hex code?
If the code has 8 (or 4) digits, the last pair is the alpha — it decodes automatically here. For a plain 6-digit code, type the opacity you want into the Alpha box as 0–1 or a percentage and copy the assembled rgba(). No hand-editing of the hex required.
What does #fff or #f80 mean?
Shorthand: each digit doubles, so #fff is #ffffff (white) and #f80 is #ff8800. A fourth shorthand digit doubles into an alpha pair the same way. It exists purely to save keystrokes — the expanded and short forms are byte-identical colors.
Why did my 0.5 alpha come back as 0.502?
Hex alpha lives on a 256-step scale where 0.5 has no exact step: it stores as the pair 80, which is 128/255 = 0.50196…. The color is indistinguishable; only the decimal differs. This page decodes pairs exactly rather than rounding them to prettier numbers.
Is rgb() better than hex in CSS?
The browser treats them identically — same parsing cost, same rendering. Choose by context: hex travels well in configs and design handoffs; rgb() slots into code that computes channels; and where you need alpha with legacy support, rgba() is the safest of all the spellings.
What about HSL and the other spaces?
Every conversion here includes hsl(), HSV, and an approximate device-CMYK as readouts. For the opposite journeys, the RGB to HEX converter is live, and an hsl-to-hex page is queued on the same engine — gradients between colors belong to a planned generator.