HEX to RGB Converter

How to Convert HEX to RGB by Hand

A HEX color code looks cryptic at first, but it is just three numbers wearing a disguise. The hash is decoration, and the six characters after it are three pairs of hex digits, one pair each for red, green, and blue. Converting to RGB means turning each pair from base 16 back into an ordinary decimal number between 0 and 255.

The routine is short:

1. Drop the leading hash and take the six remaining characters.
2. Split them into three pairs: the first pair is red, the second green, the third blue.
3. Convert each pair from base 16 to decimal. The left digit counts sixteens, the right digit counts ones.
4. Write the three results as rgb(red, green, blue).

Worked example: #FF5733

Split into FF, 57, 33 and convert each pair:

The letters A through F simply stand for 10 through 15, so F is 15 and FF works out to (15 x 16) + 15 = 255, the maximum any channel can reach.

Shorthand Three Digit HEX

You will often see three digit HEX codes like #F53. This is a shorthand that CSS expands by doubling every digit, so #F53 becomes #FF5533. The shorthand only works when both digits of each pair are identical, which is why it can only express 4,096 of the 16 million possible colors. When you convert a three digit code, expand it first, then treat it exactly like a normal six digit code.

Where You Actually Need RGB

If HEX is so compact, why convert at all? Because plenty of contexts want the raw channel numbers. CSS rgba() is the classic case: to fade a color to fifty percent opacity you need rgba(255, 87, 51, 0.5), and there is no way to add that alpha to a plain HEX color without switching notations. The HTML canvas API expects RGB style strings for its fillStyle and strokeStyle. SVG attributes, WebGL, and most image manipulation code all work in RGB because the individual numbers are what the math operates on. Whenever you need to reason about or animate a single channel, RGB is the format that gives you direct access to it.

Named Color Reference

CSS ships with a set of keyword colors you can write by name instead of a code. They map to exact HEX and RGB values, so the table below is handy when you want to sanity check a conversion or reach for a familiar color without opening a picker.