RGB to HEX: The Complete Conversion Guide 2026

Converting RGB to HEX means taking a color written as three decimal numbers, like rgb(255, 87, 51), and rewriting it as a six-character hexadecimal code, like #FF5733. You convert each channel, red, green, and blue, from its 0-to-255 decimal value into a two-digit hex value from 00 to FF, then join the three pairs behind a hash. That's the whole thing. Both formats describe the identical color, so nothing is lost in the swap. This guide walks through the conversion step by step, explains why the maths lines up so neatly, covers when to use each format, and gives you a reference table. For the reverse direction, see our HEX to RGB complete guide.

What Are RGB and HEX?

RGB stands for red, green, blue. It describes a color by the intensity of each of those three channels, written as a decimal number from 0 to 255, like rgb(255, 87, 51). This maps directly to how a screen works. Every pixel is made of tiny red, green, and blue lights, and mixing them at different brightnesses produces every color you see.

A HEX code is the same three channels written in base-16, or hexadecimal, notation. Each channel becomes two characters from 00 (off) to FF (maximum), and the three pairs sit together behind a hash, like #FF5733. Hexadecimal uses the digits 0 to 9 and then the letters A to F to count from ten to fifteen, which lets a single pair of characters cover all 256 values of a channel. HEX is the default output of design tools like Figma and Photoshop, which is why it shows up everywhere on the web. Our HEX color codes explained guide breaks the format down further.

How Do You Convert RGB to HEX?

The conversion is a simple three-step process. Take rgb(255, 87, 51):

1. Take each channel on its own. Red is 255, green is 87, blue is 51.
2. Convert each to two hex digits. Divide the value by 16 for the first digit and take the remainder for the second, mapping 10 to 15 onto A to F. So 87 divided by 16 is 5 remainder 7, which is 57. And 255 is FF, 51 is 33.
3. Join them behind a hash. #FF5733.

One rule to remember: pad any single-digit result with a leading zero so every channel is exactly two characters. A blue value of 5 converts to 5 in hex, but you write it as 05, not 5, or the code breaks. That's the single most common slip when people convert by hand. A free converter pads automatically and removes the risk entirely.

Why Does RGB Convert to HEX So Cleanly?

Because both formats are just two ways of writing the same underlying numbers. A color channel is stored in 8 bits, which gives 256 possible levels, from 0 to 255. And 256 is exactly what two hexadecimal digits can hold, from 00 to FF. That neat match is why one RGB channel always maps to exactly two hex characters with no rounding and no loss.

Stack the three channels together and you get 24-bit color: 8 bits each for red, green, and blue, which works out to 256 x 256 x 256, or 16,777,216 possible colors, the "16.7 million" figure quoted for standard displays. Both notations sit inside the same standard color space, sRGB, which was created by HP and Microsoft in 1996 and standardised by the International Electrotechnical Commission as IEC 61966-2-1. The W3C CSS Color Module Level 4 is explicit about it: hex notation "allows an sRGB color to be specified by giving the components as hexadecimal numbers," and the spec spells out the order, with the first pair the red component, the next green, the last blue. That design was deliberate. MIT's CSAIL reference on colour spaces describes sRGB as a standard default colour space for the internet that was "cleverly designed to employ the 24-bit (256x256x256) color encoding already in widespread use; and the 2.2 gamma intrinsic to CRT monitors." In other words, the numbers lined up with the hardware people already had. Mozilla's MDN reference on CSS color values lists hex and rgb() side by side as two syntaxes for the same thing. So the two are interchangeable by design, not by coincidence.

Which HEX Formats Are Actually Valid?

Six digits is what you'll write most days, but the spec allows four different lengths, and knowing them saves confusion when you meet a code that looks too short.

• Six digits, #RRGGBB. The standard form. Two digits per channel, fully opaque. #FF5733.
• Three digits, #RGB. Shorthand where each digit is doubled, so #123 means exactly #112233. It only works when both digits in every pair happen to match, which is why #FF5733 has no shorthand but #FFCC00 collapses to #FC0.
• Eight digits, #RRGGBBAA. Six digits plus a fourth pair for alpha, where 00 is fully transparent and FF is fully opaque. This is how you write an rgba() color as hex.
• Four digits, #RGBA. The doubled shorthand for the eight-digit form, same rule as the three-digit one.

One thing worth knowing about the shorthand: it's not a rounding or an approximation. #FC0 and #FFCC00 are the identical color, byte for byte. And case never matters. The spec treats #00ff00 and #00FF00 as the same value, so pick a convention for your codebase and stick to it for readability rather than correctness.

When Should You Use RGB vs HEX?

Both are fully supported in CSS and describe the same colors, so the choice is about what's convenient for the job in front of you.

• HEX is best for pasting exact colors from a design tool or a brand style guide, and for keeping stylesheets compact. It's the format most designers hand off.
• RGB and RGBA shine when you need transparency or when you're generating colors in code. The decimal numbers are easy to read, and rgba(255, 87, 51, 0.5) sets 50 percent opacity cleanly.
• HSL is worth knowing too. It uses hue, saturation, and lightness, which makes it the easiest format for building darker hover states or muted variants. Many design systems store palettes in HSL for exactly that reason.

A common workflow is to store brand colors as HEX, convert to RGBA when you need a see-through overlay, and reach for HSL when building tints and shades. Our CSS color formats explained guide goes deeper on all of them.

Advertisement

What Are Common RGB to HEX Values?

A handful of colors come up again and again. Here's a quick reference with both notations side by side.

Look at the pure colors and the pattern jumps out. A channel that's fully on becomes FF, and one that's off becomes 00. Red is 255 red and nothing else, so #FF0000. White is all three channels maxed, so #FFFFFF. Grey at 128 lands on 80 in hex, which is why balanced greys read as #808080. Once you can see that, you can estimate many HEX codes from their RGB values in your head.

How Do You Use a Free RGB to HEX Converter?

The fastest way to convert is to let a tool do the maths, especially since it pads zeros and handles the letters for you. Our converter runs entirely in your browser, so nothing is uploaded and there's no signup:

1. Open the tool. Go to the free color converter, which works in both directions.
2. Enter your RGB values. Type the red, green, and blue numbers, each from 0 to 255.
3. Read the HEX result. The tool shows the matching HEX code, usually with a live preview swatch so you can confirm the color.
4. Copy and paste. Drop the HEX code straight into your CSS or design file.

If you'd rather grab a color off the screen first, the color picker gives you both the RGB and HEX values at once. Between the two, you'll rarely need to do the conversion by hand again.

What Else Do People Ask?

How do you convert RGB to HEX?

Take each of the three RGB channels, a decimal number from 0 to 255, and convert it to a two-digit hexadecimal value from 00 to FF, then join them behind a hash. For example, rgb(255, 87, 51) becomes 255 which is FF, 87 which is 57, and 51 which is 33, giving #FF5733. Pad any single-digit result with a leading zero so each channel is two characters.

What is the difference between RGB and HEX?

They describe the same colors in different notations. RGB writes each of the red, green, and blue channels as a decimal number from 0 to 255. HEX writes each channel as a two-digit hexadecimal value from 00 to FF. RGB is easier to read and supports an alpha channel for transparency, while HEX is compact and standard in design tools.

Is RGB or HEX better for CSS?

Neither is better, since both are fully supported in CSS and describe the same sRGB colors. HEX is convenient for pasting exact brand colors from design tools and keeps stylesheets tidy. RGB is handy when you need transparency through rgba or when generating colors in code. Many developers use HSL for adjusting a color's lightness and saturation.

Can every RGB color be written as HEX?

Yes, every standard RGB color converts to a HEX code with no loss, because both use the same 8-bits-per-channel sRGB values. The only exception is the alpha channel: an rgba color with partial transparency needs an 8-digit HEX code to carry the opacity, which some older tools support less reliably than rgba.

What is rgba and how does it become HEX?

rgba is RGB plus an alpha value between 0 and 1 that sets opacity, like rgba(255, 87, 51, 0.5) for 50 percent. To write it as HEX you convert the three color channels normally, then add a fourth two-digit pair for the alpha, making an 8-digit code. Half opacity is roughly 80 in hex, so the example becomes #FF573380.

Sources: W3C CSS Color Module Level 4 (w3.org) for hex and rgb() notation in the sRGB space; MIT CSAIL's colour spaces reference (people.csail.mit.edu) on the 24-bit 256x256x256 encoding and the CRT gamma it was built around; MDN Web Docs on CSS color values (developer.mozilla.org). All three linked above. The sRGB colour space itself is standardised as IEC 61966-2-1, which sits behind a paywall at iec.ch, so we describe it rather than link it.