HEX to RGB: Convert Bytes, Expand Shorthand and Handle Alpha

A six-digit HEX color and an rgb() value can describe the same opaque sRGB color. HEX writes each channel in base 16; ordinary integer RGB writes it in base 10. Converting the notation does not make the color brighter, increase its gamut or prepare it for a printer.

Work through #228BE6

Split the six digits into three pairs: 22, 8B and E6. In hexadecimal, A through F mean 10 through 15. For each pair, multiply the first digit by 16 and add the second. Red is 2*16+2 = 34. Green is 8*16+11 = 139. Blue is 14*16+6 = 230. The result is rgb(34 139 230).

To reverse the conversion, divide a channel by 16. The integer quotient is the first HEX digit and the remainder is the second. For 139, the quotient is 8 and the remainder is 11, so the pair is 8B. Keep leading zeroes: decimal 5 is 05 as a channel pair, not a single 5 in a six-digit code.

Enter #228BE6 in the color converter and compare each channel with the hand calculation.

Expand shorthand before splitting

Three-digit #3AF expands by repeating each digit: #33AAFF. Its channel values are 51, 170 and 255. It does not mean #0003AF, and it does not become #3AF3AF. A six-digit code can shorten only when both digits in every channel pair match.

• •#000000 becomes #000 and represents rgb(0 0 0).
• •#FFFFFF becomes #FFF and represents rgb(255 255 255).
• •#AABBCC becomes #ABC; #AABBCD cannot use that shorthand.

Alpha changes the task

CSS also supports alpha-bearing hexadecimal notation. Eight digits use RRGGBBAA, so the final pair is transparency. Four-digit RGBA shorthand repeats each digit in the same way. An alpha byte of 80 is 128/255, approximately 0.502; it is not exactly one half.

Color Match contrast inputs currently accept opaque three- or six-digit values. Do not silently remove an alpha channel and test the remaining color: translucent text is displayed as a mixture with what is behind it. Determine the resulting visible colors before evaluating that contrast pair.

Validate before converting

• •Remove only an optional leading # and surrounding whitespace.
• •Require valid hexadecimal digits; G is not a HEX digit.
• •Check the supported length rather than padding arbitrary short input.
• •When using numeric RGB bytes, require integers from 0 through 255 for this conversion.

After conversion, test the intended use

Use the comparison tool when choosing between two samples, or the contrast checker when deciding whether this exact sample works as a foreground. Keep the original color space with the values when handing off wide-gamut design assets; changing notation alone is not a color-space conversion.