RGB to Hex Converter

Why this direction is harder than it looks

Going from hex to RGB is a split: cut six characters into pairs and read each pair as a base 16 number. Going from RGB to hex is that arithmetic in reverse, one channel at a time, followed by a join with no separators at all. The steps are easy. The joining is where people slip.

The input is three whole numbers, one per channel, each between 0 and 255. The output is a hash and six characters. Nothing is reordered: red comes first in both notations, green second, blue third. A converter that turns a blue input into an orange output has almost always written the channels in BGR order while the arithmetic itself was right.

Padding is the other quiet failure. Any channel below 16 needs a leading zero, because every channel occupies exactly two characters. rgb(5, 12, 255) becomes 05, 0C and FF, so the code is #050CFF. Drop that zero and you get #50CFF, which is not a color at all. A spreadsheet that stores the value as a number will strip the zero for you and never mention it.

One channel, two characters

Each channel is converted on its own with a division and a remainder. The first hex digit is the channel divided by 16, rounded down. The second digit is what is left over.

high = floor(value / 16), low = value mod 16, and value = high x 16 + low

The last form is the one to keep, because it lets you check a conversion in your head. 200 = 12 x 16 + 8, so 200 is C8. 77 = 4 x 16 + 13, so 77 is 4D. Once you know that A is 10, B is 11 and F is 15, most common pairs become familiar: 33 is 51, 66 is 102, 80 is 128, CC is 204.

Two digits carry 16 x 16 values, which is 256, so a channel runs from 0 to 255. Three channels give 256 x 256 x 256 = 16,777,216 colors. That is why 255 is the top of the scale rather than 100: the notation is built on powers of 16, not on percentages.

The W3C CSS Color Module Level 4, a Candidate Recommendation Draft dated 22 October 2026, defines a hex color as a hash followed by 3, 4, 6 or 8 hexadecimal digits, and states that the case of the letters does not matter. The same document sets the percentage reference range for the red, green and blue channels at 0% = 0.0 and 100% = 255.0.

Worked example: rgb(59, 130, 246)

Take the interface blue that a lot of design systems use, and run each channel through the division.

• Red: 59 = 3 x 16 + 11, so the pair is 3B
• Green: 130 = 8 x 16 + 2, so the pair is 82
• Blue: 246 = 15 x 16 + 6, so the pair is F6

Join the pairs in order and the code is #3B82F6. The letters are not decoration: B is 11 and F is 15, because the digit sequence continues past 9 with A through F. Reading 3B as 38 because B looks like 8 is the most common hand conversion error, and it shifts red from 59 to 56.

The same color has two other useful readings. As a share of 255, the channels are 23.1%, 51.0% and 96.5%. As HSL, it is hsl(217, 91%, 60%), where 217 is the hue in degrees, 91% is saturation and 60% is lightness. That HSL triple is an approximation computed from the channel values, so a design tool may print 218 or 92% for the same color; the six digit hex is the value that does not drift.

A blue that does shorten is rgb(51, 136, 255). The pairs are 33, 88 and FF, giving #3388FF, which collapses to #38F because every pair repeats a digit. Section 7 covers when that is legal.

Round, do not chop off the decimal

Whole numbers from 0 to 255 convert exactly, and there is nothing to decide. Percentages and decimals do not, because 101 percentage steps have to land on 256 whole values, and they cannot do it evenly.

The scale factor is 2.55. Fifty percent is 127.5, and the answer is 128, which is 80 in hex. truncateing gives 127, which is 7F, one step darker, and a color that no longer matches the one the browser paints. The spec tells user agents to round component values toward positive infinity rather than truncate them, and to clamp out of range values when the color is parsed, so rgb(300, 0, 0) is red rather than an error.

Alpha follows the same rule on a different scale: 0.5 x 255 = 127.5, which rounds to 128, so half opacity is 80 in the last pair. Ninety percent is 229.5, which rounds to 230, or E6.

Rounded values compound. Convert hex to rgb, rgb to hsl and back, and every step that rounds to a whole number can move a channel by one. Run a dozen colors through that loop and a palette will drift by a visible amount, which is why design systems store the hex and compute derivatives from it rather than the other way around.

Percentage and 0 to 1 inputs

CSS takes channels as numbers from 0 to 255, as percentages, or in the modern syntax as numbers from 0 to 1. Design tools export whichever form the author happened to pick, and the three are not interchangeable without scaling. Multiply a percentage by 2.55 to reach the 0 to 255 scale.

A tool that writes rgb(0.2, 0.5, 0.9) means 20%, 50% and 90%. Scaled up, that is 51, 128 and 230, or #3380E6. Typing 0.2, 0.5 and 0.9 into a box that expects 0 to 255 produces a near black instead, because 0.2 rounds to 0 and 0.5 rounds to 1. The converter above has a channel scale switch for this case: set it to 0 to 1 and the floats are multiplied by 255 before rounding.

CSS also accepts rgb(20% 50% 90%) with spaces and no commas, and the older comma form rgb(51, 128, 230). Both describe the same color and both convert to #3380E6. If a stylesheet mixes the two syntaxes, nothing breaks, but a script that parses one form with a regex written for the other will return nonsense.

Alpha lives in the last pair

An eight digit code is the six digit code plus an alpha pair. In CSS alpha is a number from 0 to 1, scaled to 0 to 255 and then written as two hex digits: 00 is fully transparent and FF is fully opaque.

So rgb(59, 130, 246) at half opacity is #3B82F680, and the same color at 80% is #3B82F6CC. The four digit form #RGBA is the shorthand of the eight digit form, so #3B8F expands to #33BB88FF. The W3C spec uses #0000ffcc and rgb(0 0 100% / 80%) as its own example of the pair being the same color.

In CSS the same value can be written rgba(59, 130, 246, 0.5) or rgb(59 130 246 / 0.5). The comma form with four arguments is legacy syntax that browsers still accept everywhere; the slash form is the current one. Alpha is not a fourth color channel in the way red, green and blue are. It controls how much of the backdrop shows through, so one code over a white page and over a black page renders as two different visible colors, which is why a swatch copied from a dark mockup can look wrong on a light site.

When the three digit shorthand is legal

The shorthand works only when both digits of every pair match. In numbers, that means each channel is a multiple of 17, since a repeated pair is 16d + d = 17d. #FF8800 qualifies because FF, 88 and 00 each repeat inside themselves. #3B82F6 does not, because 3 is not B.

There are 16 possible digits, so the three digit notation covers 16 x 16 x 16 = 4,096 colors against roughly 17 million in the six digit form. That is why the shorthand shows up on brand colors chosen to be tidy and almost never on a color sampled from a photograph.

Rounding can create or remove a shorthand. A tool that reports rgb(52, 136, 255) leaves you without one, since 52 is not a multiple of 17; nudge red to 51 and #38F becomes legal again. If a brand guide insists on a shorthand, the six digit code has to be chosen to fit it, not the other way around.

Traps that survive a round trip

These are the failures that show up when a value moves between a design tool, a stylesheet and a script.

• 0 to 1 floats read as 0 to 255. A color exported as rgb(0.9, 0.4, 0.1) is a warm orange, not three nearly black channels. Scale before you paste.
• Alpha in the wrong slot. In #RRGGBBAA the alpha pair goes last. Put it first and every channel shifts by one pair, which turns a blue into something closer to teal.
• Leading zeros lost. Channels below 16 produce codes like #050CFF, and a spreadsheet or a numeric field will happily store 050CFF as the number 50CFF.
• Four digit codes read as six. #3B8F is not #3B8F00. It is the shorthand of #33BB88FF, a different color with a different alpha.
• HSL round trips. hsl(217, 91%, 60%) converts back to 59, 130, 246 only if the hue and saturation are kept to enough decimals. Rounded HSL values come back one or two steps off.
• Color profiles. A hex code says nothing about a color space. The same #3B82F6 on two uncalibrated monitors can look different, and print work needs a CMYK conversion that a hex code cannot carry.

When a converted color looks wrong, compare the three channel numbers first. If they match what you intended, the notation is fine and the problem sits somewhere else: a competing CSS rule, an opacity on a parent element, or a background showing through a translucent fill.

The formal rules for all four hex forms are in the W3C CSS Color Module Level 4, and the MDN reference on the hex-color data type shows the same notation with browser examples. For the reverse direction, the site's hex to RGB converter splits a code into channels.