Free RGB to Hex Converter

What Is an RGB to Hex Converter?

Quick answer: An RGB to hex converter writes each of red, green and blue (0 to 255) as two hex digits and joins the pairs after a #. Red 46, green 134 and blue 193 become #2e86c1. Set the R, G and B sliders above, then copy the code.

This free online converter works one way: three sliders in, Hex Value and RGB Value out, with no sign-up.

How to Convert RGB to Hex With This Tool

Four steps convert an RGB color to hex: set, check, read, copy.

1. Set the three channels. Drag the R, G and B sliders, each 0 to 255. For an exact value, tab to a slider and use the arrow keys (Home gives 0, End gives 255). There is no box to type a number into, so without a keyboard, use the by-hand method below.
2. Check the color. The wide box takes your color when you release the handle. Mid-drag, only the orange number tag moves; arrow keys refresh the box and fields at once.
3. Read the code. Hex Value shows a six-digit hex code, lowercase, with a leading #: 46, 134, 193 gives #2e86c1. RGB Value repeats it as rgb(46,134,193), no spaces.
4. Copy it. Click the orange copy icon beside Hex Value or RGB Value to copy exactly that text. No Copied message appears, so paste once to check.

Tip: On a phone the fields can sit below the first screen, so scroll down after setting the sliders. After the Back button, if Hex Value reads #000000 while the sliders show a color, nudge one slider a step toward the middle and put it back.

RGB to Hex Color Table

Every RGB to hex color code below came out of this converter; the names are CSS named colors, or web colors.

Read a code as three pairs: red, green, blue. When all three pairs match, you get a gray, like #808080 and #c0c0c0. Steps of 64 are easy to spot because the first digit counts 0, 4, 8, c: 0 is 00, 64 is 40, 128 is 80 and 192 is c0, with 255 as ff.

Don't read hex digits as decimal. In #ff5733, which is 255, 87, 51, the pair 57 means 87, because 5 times 16 plus 7 is 87.

One name trap: lime is the pure green (0, 255, 0), while the CSS keyword green is the darker 0, 128, 0.

How to Convert RGB to Hex by Hand

Converting RGB to hexadecimal by hand is a base 10 to base 16 job. Hex codes use 8-bit RGB, so a channel has 256 levels, and two hex digits cover exactly that many (16 times 16).

The RGB to hex formula is one division per channel value. Divide by 16, and the quotient is the first digit while the remainder is the second, with 10 to 15 written A to F. A channel under 16 has a quotient of 0, which is the leading zero people drop.

A worked example with 46, 134, 193: 46 divided by 16 is 2 remainder 14, and 14 is e, so 2e. For 134 the quotient is 8 and the remainder is 6: 86. 16 goes into 193 twelve times with 1 left over, and 12 is c: c1. Put the pairs after a hash sign and you have #2e86c1, the code the tool shows.

The trap: rgb(9, 9, 11) is 09, 09, 0b, so the code is #09090b, as the tool prints it. Skip the zeros and you get #99b, which a browser reads as shorthand for #9999bb: valid CSS, wrong color (Chromium computes rgb(153, 153, 187)).

Order matters too. Swap red and blue and #ff0000 becomes #0000ff, a valid code that raises no warning.

For a quick check, the decimal to hex converter turns 46 134 193 (space-separated) into 2e 86 c1. It does not pad, so 9 9 11 comes back as 9 9 b and you add the zero yourself. New to base 16? Read how hex digits work.

How to Convert Hex Back to RGB

This converter goes one way. Hex Value is a read-only field, so typing into it changes nothing.

By hand, hex to RGB means splitting the code into three pairs, multiplying each first digit by 16, adding the second and counting A to F as 10 to 15.

Try #ff6347, the tomato row. ff is 15 times 16 plus 15, which is 255. 63 is 6 times 16 plus 3, so 99. 47 is 4 times 16 plus 7, so 71. That gives rgb(255, 99, 71).

A shortcut: the first digit pins a channel to a block of 16, so a code starting with 2 has red between 32 and 47.

RGBA to Hex, Shorthand and Other CSS Color Formats

#2e86c1, rgb(46, 134, 193) and the space-separated rgb(46 134 193) all resolve to the same CSS color value in Chromium 143. Uppercase and lowercase are interchangeable in hex notation (see the MDN hex color reference). We print lowercase; if your codebase uses uppercase, convert after pasting and keep one case, since grep and sed match case by default and a search for #2e86c1 skips #2E86C1.

This converter has no alpha control and writes no eight-digit hex, so transparency is manual. Multiply the alpha (opacity), from 0 to 1, by 255, round, and write two hex digits. For 0.5 that is 127.5, rounded to 128, or 80 in hex. Append it and you have #2e86c180, which Chromium computes as rgba(46, 134, 193, 0.5).

Worth memorizing: 00 is fully transparent, 40 is 25 percent, 80 is 50 percent, bf is 75 percent and ff is opaque.

Rounding is a choice. Round down and 127.5 becomes 127, which is 7f. Chromium reads 7f as 0.498 and 80 as 0.5, one step apart, so pick one rule and keep it.

MDN Web Docs lists a four-digit hex form, #rgba. The rgba() function is an alias of rgb(), and the modern spelling is rgb(46 134 193 / 50%), described in the rgb() function reference.

Shorthand hex works only when every pair is a doubled hex digit, so #ff6600 becomes #f60. A doubled digit d is d times 16 plus d, which is d times 17, so the pair 66 is 102 and the qualifying channel values are the 16 multiples of 17, from 0 to 255. #2e86c1 cannot be shortened, and a five-digit cut like #2e86c is invalid. We always write six digits, the form a color input needs.

Percentage values take a detour: rgb(100%, 40%, 0%) is rgb(255, 102, 0), so multiply a percentage by 2.55 first. A decimal from 0 to 1 takes 255 instead, then rounds.

Where hex is required: A color input (type="color") accepts only the six-digit #rrggbb form, and in Chromium it falls back to #000000 for shorthand, rgb() or eight-digit codes.

Code Examples: RGB to Hex in CSS, JavaScript and Python

First the CSS forms, then JavaScript and Python versions that hand the base 16 step to the language. We ran all three before publishing.

.alert {
  color: #2e86c1;
  border-color: rgb(46, 134, 193);
  background: #2e86c180;
}

const toHex = (n) => n.toString(16).padStart(2, "0");
const rgbToHex = (r, g, b) => "#" + toHex(r) + toHex(g) + toHex(b);

rgbToHex(46, 134, 193); // "#2e86c1"
rgbToHex(9, 9, 11);     // "#09090b"

def rgb_to_hex(r, g, b):
    return f"#{r:02x}{g:02x}{b:02x}"

print(rgb_to_hex(46, 134, 193))  # #2e86c1

padStart(2, "0") and the :02x format are the code version of the leading zero rule: two digits, zero padding, lowercase hex. Both assume whole numbers from 0 to 255: pass 300 and you get the seven-digit string #12c0000, which CSS ignores. Pass 87.6 and JavaScript returns 57.999999999998 for that channel, while Python raises a ValueError for the same format. Round and clamp each channel to 0 to 255 before you format it.

What This Converter Does and Does Not Do

Limits first, so you can tell whether this CSS color converter fits.

• What it does. It turns whole-number channels from 0 to 255 into a six-digit lowercase code, one color at a time. Copy Hex Value for a stylesheet, RGB Value for rgb().
• What it skips. You cannot type or paste a value, and the read-only fields take no hex code. No alpha, eight-digit hex, shorthand or uppercase option either.
• What we tested. In our tests (Chromium 143, desktop), Hex Value matched a separate calculation for 32 chosen colors and for all 4,913 in a sweep (17 levels per channel). Touch dragging and other browsers were not tested.
• Color space. Hex and rgb() both describe sRGB colors, per the W3C specification CSS Color Module Level 4. Ink on paper uses a different color model and needs its own conversion, which this tool does not do.

Related Free Tools

Once your colors are in a stylesheet, try these.

• CSS Minifier: shrink the stylesheet.
• Online HTML Viewer: see the color on a real page.
• HTML Editor: try markup and color together.
• how to minify HTML, CSS and JavaScript: the guide behind the minifier.
• all website management tools: the category with the three tools above.