Home / Blog / Color & design

Color & design

How to Convert HEX to RGB: Read the Three Color Channels

Convert three-digit or six-digit HEX into RGB with worked channel arithmetic, verified examples, input limits and checks for preserving the original color.

A six-digit HEX color stores three channel values in the order red, green and blue. Split the six digits into three pairs, convert each pair from base sixteen to decimal, and write those values as RGB. For example, #123456 becomes rgb(18, 52, 86). The conversion changes the notation, not the encoded color.

Split the value before doing arithmetic

Remove the leading hash sign for the calculation, then keep the remaining digits in their original order. The first pair is red, the second is green and the third is blue. Do not reverse the pairs or interpret the whole value as one channel. Each pair represents a number from zero through 255.

ChannelHEX pairCalculationDecimal
Red121 × 16 + 218
Green343 × 16 + 452
Blue565 × 16 + 686

Letters supply the remaining hexadecimal digit values: A is ten, B eleven, C twelve, D thirteen, E fourteen and F fifteen. Thus FF is fifteen times sixteen plus fifteen, or 255. Uppercase and lowercase letters represent the same digits; changing F to f does not alter the number.

Expand three-digit colors correctly

The short form duplicates each individual digit. For #abc, repeat a, b and c to obtain #aabbcc. The resulting channels are 170, 187 and 204. Do not append three zeroes or treat a, b and c as the decimal channels 10, 11 and 12. Those operations produce different colors.

Shortening a six-digit color is possible only when both digits of every pair match. AABBCC can become ABC, while 123456 cannot become 135 without changing its channel values. Keep six digits when there is any uncertainty about a shorthand transformation.

Use the converter with a known example

Open HEX to RGB, select HEX → RGB in the Conversion control and enter #123456. The result should include RGB: rgb(18, 52, 86). Change the input to #abc and verify the new RGB line is rgb(170, 187, 204). The preview should change with the result.

This tool accepts three or six hexadecimal digits, with or without the hash sign. It does not accept a fourth or eighth alpha digit in this mode. A malformed value should clear the previous result and disable Copy rather than leave the earlier color looking like a successful new conversion.

Copy the value the destination expects

The tool's Copy action copies the labeled conversion result. If a destination expects only an RGB function, take the function from the RGB line rather than pasting the HEX and HSL labels into a single color field. If it expects three separate numeric inputs, enter the three decimal channel values individually.

Check channel order in the receiving system. An API that expects a packed integer, a different channel order or normalized zero-to-one components has a different input contract. Dividing each channel by 255 creates normalized values, but that additional operation is unnecessary for a field explicitly expecting byte values from zero through 255.

Check a round trip without judging by eye

Convert the resulting channels back to HEX and compare all six digits with the expanded original. For the first example, 18 becomes 12, 52 becomes 34 and 86 becomes 56, recovering 123456 exactly. Preserve leading zeroes: a decimal channel of five becomes 05, not a one-character field that shifts the remaining pairs.

A swatch is useful for catching an obvious channel swap, but numeric equality is the stronger check for this conversion. Display brightness, neighboring colors and transparency can affect appearance without changing the underlying channel values. Keep those rendering questions separate from whether the base-sixteen arithmetic was performed correctly.

Syntax reference

For the broader range of CSS color formats beyond this converter's accepted input, consult MDN's CSS color reference.