RGB to hex converter

How to use the RGB to hex converter

1. Type the red, green and blue values. Each one is a whole number from 0 (none of that light) to 255 (as much as possible). Design apps show them as "R 255 G 87 B 51" or rgb(255, 87, 51).
2. Read the hex code. It updates as you type: #FF5733 for the example above.
3. Copy the form you need. The result also lists the 3-digit shorthand (only when the color has one), the CSS rgb() string, the HSL version and the 24-bit decimal that some apps and APIs want.

If you have a percentage instead, as in rgb(100%, 34%, 20%), multiply each percentage by 2.55 and round before you type it in: 34% × 2.55 = 86.7, so 87. If you have the hex code and want the numbers, the hex to RGB converter goes the other way.

The RGB to hex formula

A hex color code is the same three numbers written in base 16 (hexadecimal) instead of base 10, one after the other, with a # in front: #RRGGBB. Hexadecimal uses sixteen digits, 0 to 9 and then A to F for ten to fifteen, so every value from 0 to 255 fits in exactly two digits (16 × 16 = 256 possibilities).

To convert one channel:

1. Divide by 16. The whole-number part is the first hex digit.
2. The remainder is the second hex digit.
3. Write any digit above 9 as a letter: 10 = A, 11 = B, 12 = C, 13 = D, 14 = E, 15 = F.

Red 87: 87 ÷ 16 = 5 remainder 7, so 57. Red 255: 255 ÷ 16 = 15 remainder 15, so FF. Blue 51: 51 ÷ 16 = 3 remainder 3, so 33. Put the three pairs together in red, green, blue order: #FF5733.

The order matters. #5733FF has the same digits but is a blue-violet, because the pairs are read as red 57, green 33, blue FF.

Worked examples

The names in brackets are CSS named colors, which are defined with exactly these values in the CSS Color specification, so you can check the converter against them.

Why colors are written in hex

Screens mix red, green and blue light. In the standard 8-bit sRGB system each channel has 256 levels, which gives 256 × 256 × 256 = 16,777,216 colors ("16.7 million colors" in monitor specs). A hex code packs all three channels into six characters, which is why HTML and CSS adopted it: color: #FF5733; is shorter than color: rgb(255, 87, 51); and means exactly the same thing. Browsers treat the two forms identically (MDN: hex color).

Hex digits are not case-sensitive. #ff5733, #FF5733 and #Ff5733 are one color. Most code formatters pick lowercase; most design tools display uppercase. Use whichever your style guide prefers.

The 24-bit decimal in the result is the same six hex digits read as a single number: red × 65,536 + green × 256 + blue. For #FF5733 that is 16,734,003. A few places ask for it, such as bot and chat-embed APIs that store a color as an integer.

When an RGB to hex code can be shortened

CSS allows a 3-digit shorthand, #RGB, when each of the three pairs is a doubled digit. #FFFFFF becomes #FFF, #000000 becomes #000 and #FF6600 becomes #F60. The browser expands each digit by repeating it, so #F60 is read as #FF6600.

Most colors can't be shortened. #FF5733 has no shorthand because 57 and 33 aren't doubled digits, and the converter says "None" in that case. Don't drop digits by hand: #F53 would be #FF5533, a slightly different color.

Hex color code chart: the 16 basic colors

These are the sixteen named colors that go back to the original HTML 4 palette, now part of the CSS named colors. They make a handy reference when you want to recognise a code at a glance.

Note that CSS green is the half-strength #008000; the full-strength #00FF00 is called lime. That catches a lot of people out.

RGB to HSL

HSL describes the same color as a hue angle (0° to 360° around the color wheel), a saturation percentage and a lightness percentage. Designers like it because "make it a bit lighter" is just a bigger lightness number, which is hard to do by editing hex digits.

For rgb(255, 87, 51): scale to 0–1 (1, 0.341, 0.2). Lightness is the average of the highest and lowest channels, (1 + 0.2) ÷ 2 = 0.6, so 60%. Saturation is the range divided by 1 − |2L − 1|, 0.8 ÷ 0.8 = 1, so 100%. Red is the highest channel, so the hue is 60° × (G − B) ÷ range = 60 × 0.141 ÷ 0.8 ≈ 11°. The result is hsl(11, 100%, 60%). The converter rounds to whole degrees and whole percents, which is how CSS tools usually show it.

Convert RGB to hex in JavaScript, Python and Excel

The converter above is quickest for one color. For a list of them, the one-liners below use the same formula.

JavaScript: convert each channel to base 16 with toString(16), pad to two digits, and join.

const rgbToHex = (r, g, b) => '#' + [r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('');
rgbToHex(255, 87, 51); // "#ff5733"

Python: the X format code prints a number in uppercase hex, and 02 pads it to two digits.

'#{:02X}{:02X}{:02X}'.format(255, 87, 51)  # '#FF5733'

Excel or Google Sheets: DEC2HEX(number, places) converts one channel, so with red, green and blue in A2, B2 and C2:

="#"&DEC2HEX(A2,2)&DEC2HEX(B2,2)&DEC2HEX(C2,2)

Both snippets assume whole numbers from 0 to 255. Round first if your values are decimals.

What the hex code doesn't tell you

A hex code only has meaning inside a color space. Almost everything on the web assumes sRGB, so #FF5733 looks the same on any calibrated screen. But the same three numbers taken from a Display P3 or Adobe RGB photo describe a more saturated color, which is why a color sampled in a photo editor can look different once it's pasted into CSS. Our guide to sRGB, Adobe RGB and Display P3 explains how profiles change what the numbers mean.

Six-digit hex also has no transparency. For a semi-transparent color, use eight digits (#FF573380 is 50% opaque) or rgb(255 87 51 / 50%). The hex to RGB converter reads eight-digit codes and shows the alpha as a decimal. Once you have the color, the color contrast checker tells you whether text in it is readable on your background.