RGB to HEX Converter_
Convert rgb to hex the way values actually arrive: paste rgb(255, 87, 51), a bare 255 87 51, percentages, or modern slash-alpha syntax and the hex code appears as you type — eight digits when there's an alpha channel, with an uppercase toggle and the three-digit short form when it exists. No convert button, no silent fixes: out-of-range channels are clamped with a warning that says so.
Don't have a value yet? Pick one — the color input drives the same conversion. Every result comes with a live swatch and the same color in rgb(), hsl(), HSV, and CMYK, each with its own copy button, because a color conversion rarely ends at one notation.
RGB to hexadecimal, without the mystery
What converting RGB to a hex code actually does
An RGB color is three numbers — red, green, blue, each 0 to 255 — and a hex color is the same three numbers written in base 16 and glued together behind a #. That's the entire conversion: rgb(255, 87, 51) and #ff5733 are one color, two spellings. Nothing about the color changes — no gamut shift, no precision loss — which is why converting rgb to hexadecimal code is safe to do as often as you like. The two-character pairs read in order: ff is the red channel, 57 green, 33 blue.
The arithmetic, worked once
Each channel converts by dividing by 16: the quotient is the first hex digit, the remainder the second, using digits 0–9 then a–f for 10–15. Red 255 → 255 ÷ 16 = 15 remainder 15 → ff. Green 87 → 5 remainder 7 → 57. Blue 51 → 3 remainder 3 → 33. Assemble: #ff5733. Reading backwards is the same trick in reverse — first digit × 16 + second digit. Once the digit table for a–f is in your head, you can sanity-check any rgb to hex convert on paper; until then, this page does the division.
Alpha: from rgba() to eight-digit hex
Transparency rides along as a fourth channel. CSS writes it as rgba(255, 87, 51, 0.5) or the modern rgb(255 87 51 / 50%); hex writes it as a fourth pair, scaling 0–1 to 00–ff, so 50% becomes #ff573380. This page emits the eight-digit form automatically whenever the input carries alpha, and the checkerboard behind the swatch shows the transparency instead of hiding it. When a target environment can't take eight-digit hex, copy the rgba() row instead — same color, more compatible spelling.
Which spelling goes where
Hex is the interchange format: CSS, Tailwind config, SVG attributes, design-tool exports, terminal themes. Functional rgb() reads better when values are computed, and hsl() is the one you want when a human will adjust the color later — nudging lightness beats recomputing three channels. In code, the conversion is a one-liner: JavaScript (r << 16 | g << 8 | b).toString(16).padStart(6, "0"), Python f"#{r:02x}{g:02x}{b:02x}". Some APIs want the same number as a literal — 0xff5733 — which is the hex code with a different costume, the one "rgb to hex 0x" searchers are after.
How to use
- 01Paste the value in whatever form you have —
rgb(255, 87, 51), a bare comma or space triple, percentages, or rgba with alpha. The rgb to hex color conversion runs on every keystroke; the status line names the format it read. - 02No value yet? Use the picker — this rgb to hex color picker route drives the identical conversion, and the text field fills in so you can fine-tune numerically.
- 03Read the result: the hex code big at the top (uppercase if toggled, 8-digit when alpha is present, short form alongside when it collapses), the swatch beside it, and the same color as rgb(), hsl(), HSV, and CMYK below.
- 04Copy the row you need — each notation has its own button, so a color conversion rgb to hex for CSS and the HSL tweak for a hover state are one click each.
Where this conversion shows up
A brand color from a style guide into CSS
The guide lists channel values; the stylesheet wants hex.
rgb(0, 82, 204)
color: #0052cc;
A picked value into Tailwind config
An eyedroppered screenshot color needs to become a theme token.
(picked) 255, 87, 51
accent: '#ff5733'
A 50% overlay
A designer asks for the brand color at half opacity — one paste gives both spellings.
rgb(255 87 51 / 50%)
#ff573380 · rgba(255, 87, 51, 0.5)
A ticket's raw numbers, normalized
"Make the banner 255 87 51" — bare triples paste straight in.
255 87 51
#ff5733
Common colors in all three notations
| Color | rgb() | Hex | hsl() |
|---|---|---|---|
| White | rgb(255, 255, 255) | #ffffff | hsl(0, 0%, 100%) |
| Black | rgb(0, 0, 0) | #000000 | hsl(0, 0%, 0%) |
| Red | rgb(255, 0, 0) | #ff0000 | hsl(0, 100%, 50%) |
| Orange (this page’s sample) | rgb(255, 87, 51) | #ff5733 | hsl(11, 100%, 60%) |
| Teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) |
| Navy | rgb(0, 0, 128) | #000080 | hsl(240, 100%, 25%) |
| Mid gray | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) |
hsl() values are rounded to whole degrees and percents — the reason a converted-back rgb can differ by a step or two, explained in the gotchas.
Which notation each destination expects
| Destination | Preferred form | Notes |
|---|---|---|
| CSS stylesheets | Hex (or any CSS form) | Hex is shortest; rgb()/hsl() equally valid — 8-digit hex for alpha is modern-browser territory |
| HTML attributes (legacy), SVG | Hex | fill="#ff5733" — attribute values predate the functional notations |
| Design tools (Figma, Photoshop) | Hex input, RGB internals | Both paste targets accept hex; CMYK only matters for print export |
| Image editors / print | CMYK via a profile | The CMYK here is the naive formula — real print conversion needs an ICC profile |
| Native & mobile APIs | 0x literal or components | 0xFF5733 or per-channel floats — the same digits, different packaging |
| Terminal escape codes | RGB components | 38;2;255;87;51 — truecolor escapes take decimal channels |
One color, one set of digits — the destinations differ only in the wrapper they want around it.
Tips & best practices
- Paste the whole CSS declaration value, not the numbers alone —
rgb(255, 87, 51)works as-is, so there’s no need to strip the wrapper first. - Use the uppercase toggle to match your codebase’s lint rules — #FF5733 and #ff5733 are identical to the browser, but not to your formatter.
- The short #f80 form only exists when every pair doubles — this page shows it beside the full code whenever it’s available, and never emits it silently.
- Keep alpha in the color only when the destination composites it — a #rrggbbaa background behaves differently from opacity on the element.
- For programmatic palettes, prefer hsl() as the working form and convert to hex at the edge — evenly-stepped lightness reads as a designed scale.
- A clamp warning here usually means an upstream bug — 300 in a channel is a sign some math overflowed before the color reached you.
Gotchas — where color codes mislead
8-digit hex alpha is not universally understood
The #rrggbbaa form is standard CSS Color 4 and fine in every current browser, but older engines, some email clients, and many non-web tools read only 6 digits and ignore or reject the rest. When compatibility is unknown, ship rgba() — this page gives you both from one input.
Percentages and 0–255 are different scales
rgb(100%, 0%, 20%) is not rgb(100, 0, 20) — the first is #ff0033, the second #640014. Mixing scales inside one value is invalid CSS, and pasting percent values into a 0–255 field silently produces a much darker color. This page reads the % sign and scales correctly.
Rounding drift is real — but only if you round mid-flight
hsl() displayed with whole degrees and percents can shift a channel by a step or two when converted back. Repeated conversions drift only when each hop re-rounds; this page keeps full precision internally and rounds once at display, so converting back and forth stays stable.
Hex means sRGB — modern CSS color goes beyond it
A hex code carries sRGB values by definition. display-p3 and the CSS color() function express colors outside that gamut that six hex digits cannot represent; converting one to hex quietly pulls it back into sRGB. If a design spec says P3, hex is the wrong container.
A hex value carries no color-space tag
The digits say how much red, green, and blue — not which red. Two screens can render the same hex differently, and print pipelines need a profile, not a formula: the CMYK row here is the naive device conversion, useful for orientation and wrong for prepress.
Technical details
- Accepted input
- rgb()/rgba() in comma or modern space syntax, slash or fourth-argument alpha (0–1 or %), percentage channels, bare "r, g, b" / "r g b" triples, hex #rgb/#rgba/#rrggbb/#rrggbbaa (hash optional), hsl()/hsla()
- Clamping
- Out-of-range channels and alpha clamp to their bounds with a visible warning naming the value — never silently
- Output
- Hex with uppercase toggle, 8-digit when alpha < 1, 3/4-digit short form when collapsible; rgb(), hsl(), HSV, and device-CMYK readouts, each with its own copy
- Precision
- Channels held at full precision internally; rounding happens only at display, so repeated conversions between spaces do not drift (tested)
- Picker
- A native color input drives the same conversion — the page works with no typed value at all
- Scope
- Named CSS colors, palette generation, and WCAG contrast checking are out of scope; the reverse HEX to RGB converter is live on this shared engine, with hsl-to-hex queued
- Processing
- Parsing, conversion, and the swatch render in this tab — nothing you paste is transmitted
FAQ
How do I convert RGB to hex?
Divide each channel by 16: quotient then remainder become the two hex digits, with a–f standing for 10–15. rgb(255, 87, 51): 255→ff, 87→57, 51→33, giving #ff5733. Or paste the value above — the conversion runs live and gives you the other notations too.
What do the six digits of a hex code mean?
Three pairs: red, green, blue, each 00–ff (0–255). #ff5733 is full red, 87 green, 51 blue. An optional fourth pair is alpha. The # only marks the notation; some tools omit it and some APIs write the same digits as 0xff5733.
Should I use RGB or hex in CSS?
They are equivalent — pick per readability and team convention. Hex is compact and universal in codebases; rgb() reads clearly when values come from variables or math; hsl() is easiest for humans to adjust. Browsers parse all three identically.
How does transparency work in a hex code?
As a fourth pair scaling 0–1 alpha onto 00–ff: 50% ≈ 80, so rgba(255, 87, 51, 0.5) is #ff573380. It is standard modern CSS; where support is uncertain, use the rgba() row this page emits alongside.
Why does converting back give slightly different numbers?
Display rounding: hsl shown with whole degrees and percents can land a channel one or two steps off when re-converted. The color is visually identical. This page avoids compounding it by keeping full precision internally and rounding only what it shows.
What about HSL, HSV, and CMYK?
They appear as readouts under every conversion here. HSL/HSV re-describe the same sRGB color by hue and lightness or value; the CMYK shown is the naive device formula — orientation only, since real print conversion depends on an ICC profile. A dedicated hsl-to-hex page is planned on this same engine.