Color & Design·3 min read

Converting RGB to Hex by Hand: The Full Method

There's a moment in every stylesheet cleanup when you find rgb(24, 119, 242) on one line and a hex code for the same blue three rules later. Converting rgb to hex by hand is a skill worth having for exactly these moments: it's one division per channel, and once it clicks you can normalize a legacy file, fill a hex-only input in a CMS, or sanity-check a converter's output without breaking stride. Let's work through the method and the places it goes wrong.

Open the tool All insights

Why a stylesheet ends up mixing rgb() and hex at all

The scenario behind the cleanup.

Old codebases accumulate color notation the way kitchens accumulate mugs. One developer pasted values from a design tool that exports rgb functional notation, another typed hex from a brand doc, and a third let an editor plugin rewrite whatever it touched. The result renders fine, but it defeats find-and-replace: searching for #1877F2 misses every rgb(24, 119, 242) that means the same color.

Normalizing to a single notation makes palette audits possible. Hex usually wins as the target because it's the most compact, it's what design tools copy by default, and it sorts cleanly in a grep.

The other common trigger is a form field. Content systems, ad platforms, and email builders often validate their color inputs as hex only, while the value you're holding came off an RGB slider. At that point the conversion isn't a cleanup chore, it's the only way through the door.

Converting RGB to hex by hand: the division trick in full

One example, all three channels.

Each channel becomes two hex digits through one integer division. Divide by 16: the quotient is your first digit, the remainder is your second, using A through F for 10 through 15.

Apply it to rgb(24, 119, 242). Red: 24 divided by 16 is 1 remainder 8, giving 18. Green: 119 divided by 16 is 7 remainder 7, giving 77. Blue: 242 divided by 16 is 15 remainder 2, and since 15 is F, that's F2. Concatenate in order and the answer is #1877F2. The channel order never changes: red, then green, then blue, whatever order your source happens to mention them in.

Why CSS uses hex when rgb() exists

A little history, a little pragmatism.

Hex predates CSS itself; early HTML borrowed it from the way graphics programmers already wrote 24-bit colors, one byte per channel. It survived because six characters beat sixteen, because it pastes cleanly between tools, and because a single token is easier to tokenize, diff, and search than a function call with commas.

That said, rgb functional notation earns its keep whenever transparency or math is involved, and the modern space-separated form like rgb(24 119 242 / 0.5) folds alpha in directly. Neither notation is more correct. They're two spellings of the same three bytes, which is why the conversion is always exact and reversible.

Where hand conversions from rgb() slip up

Check these before trusting your result.

The arithmetic is easy enough that errors tend to be procedural rather than mathematical.

Dropping a leading zero: rgb(10, 5, 160) is #0A05A0, and writing A5A0 or A05A0 produces a five-digit code that browsers ignore entirely.
Converting the alpha in rgba(24, 119, 242, 0.5) as if it were a channel. Standard 6-digit hex has no opacity slot; you need the 8-digit form or you lose the 0.5 silently.
Misreading percentages: rgb(50%, 100%, 0%) means rgb(128, 255, 0), not rgb(50, 100, 0). Percentage and integer forms can't be mixed per channel.
Writing the remainder before the quotient, which turns 242 into 2F instead of F2 and shifts the channel by a factor of 16.

Habits that make hex normalization painless

For the day you clean up a whole file.

Batch the work by color, not by line. Grep out every rgb( occurrence first, dedupe the unique values, convert each one once, then find-and-replace per color. A 2,000-line stylesheet usually contains fewer than 30 distinct colors, so the conversion step is smaller than it looks.

Also pick a case convention before you start. Uppercase and lowercase hex are identical to browsers, but a file mixing #1877F2 with #1877f2 will still defeat naive searches, which was the original problem. The RGB to HEX tool outputs uppercase consistently, which makes it a decent tiebreaker.

Finally, verify a sample of your replacements visually rather than trusting the diff alone. Two colors that differ by one hex digit are indistinguishable in a code review but can be worth a pixel-level check on gradient stops, where small shifts occasionally produce visible banding.

RGB to HEX versus the other converters here

Choosing the right direction.

This page's direction is for when you hold channel numbers and need a code. If you're starting from a code and need numbers for an rgba() call, HEX to RGB runs the reverse mapping. When your endpoint is a tweakable theme rather than a static value, go through HSL to HEX after doing your lightness math in HSL. And if the value is destined for a print vendor, the CMYK Converter translates the same input into ink percentages instead.