Design FIELD NOTES · 3 MIN READ
How to Convert Hex to RGB (and Why Both Exist)
A hex code is three bytes in base 16: split six digits into three pairs and decode each. The arithmetic, the 3-digit shorthand rule, and when rgb() wins.
Every hex code is three bytes wearing a costume. #4f8cff is not a mysterious token — it is the numbers 79, 140, and 255 written in base 16. Converting hex to RGB is that decode, done three times, and the reverse is just re-encoding.
Reading a hex code: base 16, three channels
A 6-digit hex code spends two digits on each of red, green, and blue. Hexadecimal digits run 0–9 then a–f, where a through f stand for 10 through 15. A pair decodes as first × 16 + second: ff is 15 × 16 + 15 = 255 (the channel max), 4f is 4 × 16 + 15 = 79, and 8c is 8 × 16 + 12 = 140. So #4f8cff splits into pairs 4f, 8c, ff and decodes to rgb(79, 140, 255). Going the other way, each 0–255 value converts to hexadecimal and pads to two digits: 79 → 4f, 255 → ff.
The converter's pipeline: hex → RGB → HSL
Once the three channel numbers exist, the HSL form falls out of the standard sRGB algorithm: normalize the channels to 0–1, find the strongest and weakest, and lightness is their average. For #4f8cff blue is the maximum (1.0) and red the minimum (≈0.31), so lightness ≈ 65%. The channel spread d ≈ 0.69, and since lightness sits above the midpoint, saturation = d / (2 − max − min) = 0.69 / 0.69 = 100%. Hue is measured from the dominant channel: with blue on top, the formula lands at 219° — a medium blue. Final answer: hsl(219, 100%, 65%). All three outputs describe one color; the swatch beside them is the proof.
Three-digit shorthand: a smaller palette
CSS also accepts 3-digit hex, where each digit is doubled: #4f8 expands to #44ff88 — rgb(68, 255, 136). The doubling rule matters: 44 is not a truncation of 4f, it is the digit 4 written twice, which decodes to 4 × 16 + 4 = 68. That is why #4f8 and #4f8f8c are different colors. With only 4,096 possible shorthand codes versus 16.7 million full ones, shorthand is fine for grays, primaries, and web-safe-ish picks, and the converter accepts both forms and normalizes to the 6-digit equivalent.
Why both formats survive
Hex wins on portability: six characters, universally understood by design tools, and the form every eyedropper reports. RGB wins where the numbers matter — rgba() adds an alpha channel, JavaScript canvas APIs traffic in 0–255 channel values, and dynamic color math (darkening a channel, blending two colors) is clearer on raw numbers than on hex strings. They are the same data in two bases, so picking one is convention, not correctness. There is even a third layer underneath: WCAG contrast math starts by converting the sRGB channels to linear light — so how color contrast works is a story told entirely in RGB numbers, however the color was written.
Normalization details worth knowing
The converter takes the code with or without the leading #, in any letter case, and always outputs the normalized lowercase hex plus the rgb() and hsl() strings ready to paste into CSS. Only 3- and 6-digit forms are accepted: the 4- and 8-digit variants that append an alpha channel are rejected here — convert the six-digit color portion and add transparency separately as rgba(79, 140, 255, 0.5). The live swatch updates on every keystroke, which doubles as a sanity check that the code you pasted is the color you remembered.
Try it yourself
The Hex to RGB Converter runs the decode above with a live swatch for 3- and 6-digit input. The Color Converter covers the round trip, accepting RGB input too when the hex code is not what you have. And the Color Picker starts from a visual choice instead, returning all the codes plus a coordinating palette.