Hex to RGB Converter

How a hex colour code becomes RGB

A hex colour is three numbers written side by side. Each pair of digits is one channel — red, green, blue — and each pair is a number from 0 to 255 written in base 16. Converting is just reading the pairs back into ordinary numbers.

For #FF5733:

So #FF5733 is rgb(255 87 51). The letters stand for the values 10 to 15: A is 10, B 11, C 12, D 13, E 14 and F 15.

RGB to hex is the same thing backwards. Divide each channel by 16; the whole-number part is the first digit and the remainder is the second. 87 ÷ 16 is 5 remainder 7, so 87 is 57. Always write two digits per channel: 5 is 05, and dropping the zero shifts every digit after it into the wrong channel. That is the most common hand-conversion mistake there is.

If you want to check the arithmetic on any single pair, the hex to decimal converter does exactly that step.

3, 4, 6 or 8 digits

CSS accepts four lengths of hex colour, and they are case-insensitive — #ff5733 and #FF5733 are the same colour.

The shorthand forms double each digit; they do not pad with zeros. #F09 is #FF0099, not #F00900. It follows that only colours whose pairs are made of two identical digits have a shorthand at all — #FF5733 has none, because 57 is not a repeated digit. The converter above shows the shorthand when one exists and says so when it does not.

Transparency, and why the numbers stop matching

The optional fourth pair is alpha: 00 is fully transparent and FF fully opaque. In rgb() the same thing is written as a number from 0 to 1, or as a percentage.

The catch is that hex alpha has only 256 steps, and 255 is odd, so most round percentages do not land exactly on one. 50% is 127.5 out of 255, which has to become either 127 (7F) or 128 (80). This tool rounds to the nearest, so 50% becomes 80 — and 80 converted back is an alpha of about 0.502, not 0.5. The difference is invisible on screen, but it is why a round trip through hex can change the number in your stylesheet. The converter notes it whenever it happens.

CSS and Android disagree about where alpha goes

This one causes real bugs. CSS puts the alpha pair last: #RRGGBBAA. Android's Color.parseColor accepts #RRGGBB and #AARRGGBB — alpha first.

Take #80FF0000. Android reads it as red at about 50% opacity. A browser reads the same eight digits as red 128, green 255, blue 0, alpha 0 — a colour that is completely invisible. Nothing errors in either place; the colour is simply wrong. The Android row above gives the alpha-first form, so you can copy the right one for each platform instead of moving the pair by hand.

The same ambiguity is why the converter will not guess at eight digits written with a 0x prefix: in code, 0xAARRGGBB is the usual order, which is the opposite of CSS. Write it with # if you mean the CSS order.

rgb(), rgba(), commas and slashes

Current CSS writes colours as rgb(255 87 51), separated by spaces, with alpha after a slash: rgb(255 87 51 / 0.5). The older comma syntax, rgb(255, 87, 51) and rgba(255, 87, 51, 0.5), still works everywhere and always will. rgba() is now simply another name for rgb() — the two are exactly equivalent.

Both syntaxes are accepted as input here, and both are offered as output. The comma form is also what browsers hand back when JavaScript reads a colour with getComputedStyle, so if you are comparing against a value from the console, that is the row to use.

Channel values outside 0–255, or alpha outside 0–1, are not an error in CSS — the specification says they are clamped to the valid range. The converter does the same, so rgb(300 -20 51) becomes #FF0033, and it tells you it clamped.

What this converter cannot do

• CMYK or Pantone. Print colour depends on the ink, the paper and the colour profile. Any tool that turns a hex code into CMYK without asking about those is giving you an approximation, so this one does not offer it.
• Colours outside sRGB. Hex and rgb() can only describe sRGB. Newer CSS colours such as oklch() or color(display-p3 …) can be more saturated than any hex code. This converter does not translate those spaces: paste one and it tells you so, rather than clipping it to a different colour and presenting that as the answer.
• Fractions. Hex holds whole numbers from 0 to 255 per channel, so rgb(127.5 0 0) or a percentage like 33% has to be rounded. You will be told when that happens.
• Make every screen agree. The same hex code can look noticeably different on two uncalibrated monitors. The code is exact; the display is not.

Named colours such as tomato, and hsl() values, are also accepted — your browser's own CSS engine resolves them, and the converter reads the result. To build tints, shades and matching colours around one you have converted, or to check text contrast, use the colour palette tool.

Questions

Related tools

Browse all Sigma Wire tools - every free tool on the site, grouped by category.