RGB to HEX Converter

From decimal to hexadecimal: the actual math

An rgb() value hands you three base-10 numbers between 0 and 255. A HEX code stores those same three numbers in base-16, two digits per channel, joined behind a #. To convert one channel by hand, divide it by 16: the quotient becomes the first hex digit and the remainder becomes the second, with 10 through 15 written as the letters a through f.

Run rgb(53, 100, 196) through that procedure. Red: 53 ÷ 16 is 3 remainder 5, giving 35. Green: 100 ÷ 16 is 6 remainder 4, giving 64. Blue: 196 ÷ 16 is 12 remainder 4, and since 12 is written c, the pair is c4. Chain the pairs together and the answer is #3564c4. Because each channel already fits in one byte, no rounding happens along the way — every integer RGB triplet has exactly one six-digit HEX spelling.

The one-liner every developer eventually writes

JavaScript does the base conversion for you: (196).toString(16) returns 'c4'. The catch is small channels — (10).toString(16) returns a single character 'a', and a missing leading zero corrupts the whole code. Pad each pair explicitly: const toHex = (n) => n.toString(16).padStart(2, '0'), then '#' + [53, 100, 196].map(toHex).join('') evaluates to '#3564c4'.

Round and clamp before converting. toString(16) happily encodes fractions — (49.98).toString(16) yields '31.fa…', which is not a color — so wrap the input in Math.round and cap it to the 0–255 range first. Channel values arriving from HSL formulas or opacity math are almost never whole numbers.

Percentages and the modern rgb() syntax

CSS accepts channels as percentages, where 100% maps to 255. So rgb(100% 40% 0%) is #ff6600: 100% is 255 (ff), 40% of 255 is exactly 102 (66), and 0% is 0 (00). This converter takes both the legacy comma form and the modern space-separated form, with or without a / alpha segment.

Keep the two unit systems apart: rgb(50%, 50%, 50%) is the medium gray #808080 (127.5 rounds up to 128), while rgb(50, 50, 50) is the near-black #323232. Same digits typed, wildly different colors on screen.

Alpha: from rgba() to an 8-digit code

Transparency converts the same way as the color channels, just from a 0–1 scale: multiply the alpha by 255, round, and append the result as a fourth hex pair. rgba(53, 100, 196, 0.5) becomes #3564c480, because 0.5 × 255 = 127.5, which rounds to 128, or 80 in hex. Handy anchors: alpha 0.4 is 66, 0.6 is 99, 0.8 is cc.

Note that the hex pair does not read as a percentage. 80 looks like it should mean 80% opacity, but it is 128 ÷ 255 ≈ 50.2%. If a teammate asks for “hex with 80% alpha”, the pair you want is cc, not 80.

Quick reference: common RGB values in HEX

One more spelling worth knowing: when both digits of every pair match, the code collapses to a three-digit shorthand. rgb(51, 102, 204) encodes as #3366cc, and because 33, 66 and cc are all doubled digits it shortens to #36c. The shorthand saves bytes but rounds nothing — browsers expand it back to precisely the same three channels. Most colors, of course, don’t qualify: #3564c4 has no doubled pairs, so six digits it stays.

Where you’ll be forced to use HEX

• HTML color inputs — <input type="color"> only accepts and emits the seven-character #rrggbb form; hand it an rgb() string and it falls back to black.
• APIs and config files — GitHub label colors, CI badge services and countless YAML themes expect bare six-digit hex, often without the #.
• URLs and query strings — hex is compact and has no parentheses or commas to escape; just remember that a literal # must be encoded as %23.
• Handoffs and docs — a HEX code survives being pasted through chat, tickets and spreadsheets as a single unambiguous token.

Rounding traps and other mistakes

• Round, don’t truncate. A computed channel of 199.92 truncates to 199 (c7) but correctly rounds to 200 (c8) — a visible one-step error in gradients.
• Never skip the zero-padding: rgb(0, 160, 200) converted without padding joins into #0a0c8, a five-digit string that browsers reject outright.
• Channels outside 0–255 mean a bug upstream. Filters and blend math can overshoot; clamp before you encode.
• The legacy comma syntax cannot mix units — rgb(255, 40%, 0) is invalid CSS, so pick numbers or percentages and stay consistent.

Everything here runs 100% in your browser; the values you type never leave your machine. For the opposite direction there is the HEX to RGB converter, and when you need Lab, LCH or OKLCH from the same input, the universal color converter shows every format at once.