Hex to RGB Converter

Six hex digits are three pairs

A hex color code is a shorthand for three numbers. The six characters after the hash split into three pairs, and each pair is the red, green or blue value of the color, in that order. #3B82F6 is 3B for red, 82 for green and F6 for blue.

#RRGGBB
# 3B . 82 . F6

Each pair is a two digit number written in base 16, where the digits run 0 to 9 and then A to F for 10 to 15. The first character of the pair is worth 16 times its value, and the second is worth its value once, so the pair converts to a number from 0 to 255.

value = first digit x 16 + second digit

That gives 256 possible values per channel, which is why an 8 bit color channel runs from 0 to 255. Three channels of 256 values each is 256 x 256 x 256 = 16,777,216 possible colors in the standard RGB space.

Worked example: #3B82F6

Take the blue #3B82F6, one of the most common interface colors. Convert each pair on its own.

• Red: 3B, so 3 x 16 = 48 and 48 + 11 = 59
• Green: 82, so 8 x 16 = 128 and 128 + 2 = 130
• Blue: F6, so 15 x 16 = 240 and 240 + 6 = 246

The color is rgb(59, 130, 246). Note that B is 11 and F is 15, because the letters continue the digit sequence after 9. A pair like 3B is not 3 and B side by side, it is 3 x 16 + 11.

The same color in HSL is hsl(217, 91%, 60%), which describes the hue in degrees, the saturation as a percentage and the lightness as a percentage. The RGB form is what the screen uses. The HSL form is often easier to adjust by hand, since raising the lightness number lightens the color without touching the hue.

Contrast against white for this color is 3.68 to 1, and against black it is 5.71 to 1. Both numbers come from the same channel values through a luminance formula, and both matter when the color is used for text.

The sixteen values each digit can hold

Hex digits are worth 0 to 15, and the letters cover the top end. This table is the whole alphabet of the notation.

Common pairs come up often enough to memorize a few: 00 is 0, 33 is 51, 66 is 102, 80 is 128, 99 is 153, CC is 204 and FF is 255. The pair 80 is worth knowing because it is the halfway point at 128, and it is the pair most often used for 50% transparency.

Reading a pair gets faster with practice. The pattern is always the same: first digit times 16, plus the second digit. C8 is 12 x 16 + 8 = 200, and 4D is 4 x 16 + 13 = 77.

Three digit shorthand

When each pair repeats the same character, the code can be written with three digits. #FF8800 shortens to #F80, and #3388FF shortens to #38F. The rule is that each single digit doubles: F becomes FF, 8 becomes 88, 0 becomes 00.

• #F80 means #FF8800, which is rgb(255, 136, 0)
• #38F means #3388FF, which is rgb(51, 136, 255)
• #000 means #000000, which is rgb(0, 0, 0)
• #FFF means #FFFFFF, which is rgb(255, 255, 255)

The shorthand only works when both digits of a pair match. #3B8F cannot be shortened, because 3B and 8F have no repeated pair. A code like #ABC is valid and expands to #AABBCC, which is rgb(170, 187, 204).

Browsers have accepted the three digit form for decades, and the CSS Color Module Level 4 in the W3C specification keeps it alongside the six and eight digit forms. A four digit form also exists, #RGBA, which is the shorthand of the eight digit code.

Eight digit hex and transparency

The eight digit form adds an alpha pair at the end. #3B82F680 is the same blue as #3B82F6 with an alpha of 80, which is 128 out of 255, or about 50% opacity.

#RRGGBBAA
# 3B . 82 . F6 . 80

Alpha is not a color channel in the same sense as red, green and blue. It controls how much of what sits behind the color shows through, so the same alpha over a white background and over a black background produces two different visible colors. That is why an rgba value copied from one design can look wrong on another background.

Common colors in both notations

These are the codes that turn up most often in design work, converted to the rgb() form. The three digit shorthand is shown where one exists.

Notice that #808080 and #888 are the same color, because 8 doubles to 88. The same holds for #F00 and #FF0000. Two codes, one color, and both are valid CSS.

Design tools usually show the hex form in a color picker and the rgb form in a CSS panel. Copying either works, since the browser converts both to the same three channel values before drawing anything.

Reading hex in CSS and design tools

CSS accepts the hex code directly as a color value, and the rgb() form works the same way. A style like color: #3B82F6 and color: rgb(59, 130, 246) draw the same pixels.

The rgb() form is easier to edit by hand when you want a small shift. Raising the red channel from 59 to 79 warms the color, and lowering blue from 246 to 226 cools it. In hex, that same edit means changing 3B to 4F, which is harder to do in your head.

The hsl() form is easier for a systematic change. hsl(217, 91%, 60%) can become hsl(217, 91%, 40%) for a darker shade of the same hue, and hsl(217, 91%, 80%) for a lighter tint, without touching the channel values at all. Most design systems build their palette this way: one hue, several lightness steps.

One practical caution: a hex code does not carry a color profile. The same #3B82F6 can look slightly different on two monitors, and print work needs a CMYK conversion that a hex code cannot describe. For screen work the code is exact. For print, treat it as a starting point and check a proof.

Mistakes that produce the wrong color

Most hex mistakes are small and easy to spot once you know the shape of the notation.

• A dropped digit. Five characters instead of six is invalid, and browsers usually ignore the whole declaration, so the element keeps its previous color. Count the characters: 3, 4, 6 or 8 after the hash.
• Letters read as digits. B is 11, not 8, and F is 15, not 5. Reading 3B as 38 turns 59 into 56, a difference you can see on a large flat area.
• Alpha in the wrong slot. In the eight digit form the alpha pair goes last. Putting it first turns the red channel into the alpha value and shifts every channel by one pair.
• Mixing up RGB and BGR. Some APIs take channels in a different order. A blue that comes out orange is the classic sign that red and blue were swapped.
• Case sensitivity. Lowercase and uppercase codes are the same color. #3b82f6 and #3B82F6 both work, so a difference in case never explains a wrong color.

When a color looks wrong, convert it back and compare the three numbers. If the numbers match what you intended, the problem is elsewhere: a CSS rule with higher priority, an opacity set on a parent element, or a background showing through a transparent color. The notation itself is rarely the culprit once the pairs are right.

The formal definition of all four hex forms, including the alpha pair, is in the W3C CSS Color Module Level 4, and the MDN reference on the hex-color data type shows the same rules with browser examples.