HEX to RGB: The Complete Color Code Guide 2026

A HEX code such as #FF5733 and an RGB value such as rgb(255, 87, 51) are two ways of writing the exact same color. HEX uses base-16 hexadecimal notation, while RGB uses plain decimal numbers from 0 to 255. To convert HEX to RGB, you split the six characters into three pairs and turn each pair into a decimal number. This guide explains both formats, shows the conversion step by step, covers when to use HEX, RGB, or HSL, and includes a reference table of common colors. For a broader look at every format, see our guide to CSS color formats explained.

What Are HEX Color Codes?

A HEX color code is a six-character string, usually written with a leading hash, that specifies the amounts of red, green, and blue in a color using hexadecimal (base-16) notation. Each pair of characters represents one channel and ranges from 00 (none) to FF (maximum), which is 0 to 255 in decimal. So #FF5733 means red at FF (255), green at 57 (87), and blue at 33 (51).

HEX is the most common color format on the web and the default output of design tools like Figma, Sketch, and Photoshop, which is why you see it everywhere. There are two useful variations, both described in the MDN reference on CSS color values. A 3-digit shorthand like #F53 doubles each digit to form #FF5533, and an 8-digit code adds two more characters for an alpha (transparency) channel.

What Is RGB?

RGB stands for red, green, blue, and it describes a color by the intensity of each of those three channels as a decimal number from 0 to 255. You write it in CSS as rgb(255, 87, 51). This maps directly to how screens work: every pixel is made of tiny red, green, and blue lights, and mixing them at different intensities produces every color you see.

RGB has a close relative, RGBA, which adds a fourth value for alpha, or opacity, between 0 and 1. For example, rgba(255, 0, 0, 0.5) is red at 50 percent opacity, letting whatever is behind it show through. Because RGB uses familiar decimal numbers and supports transparency directly, it is often easier to read and to generate in code than HEX.

Those 0-to-255 numbers aren't arbitrary. Each channel is stored in 8 bits, which gives 256 possible levels per channel, and three channels together produce 16,777,216 colors, the "16.7 million" figure quoted for standard displays, according to Android Authority. That standard space is called sRGB, and it's the default across the web. It covers roughly 35 percent of the colors a human eye can see in the CIE 1931 diagram, per Wikipedia's sRGB reference. And if you'd rather skip codes entirely, CSS also recognises 148 named color keywords like tomato and rebeccapurple, listed by MDN.

How Do You Convert Between HEX and RGB?

Converting HEX to RGB is a simple three-step process. Take the code #FF5733:

1. Split into pairs. FF, 57, 33 for red, green, and blue.
2. Convert each pair to decimal. FF is 255, 57 is 87, and 33 is 51. Each hex digit is worth its value times 16 for the first digit plus its value for the second, so 57 is (5 times 16) plus 7, which is 87.
3. Write the RGB value. rgb(255, 87, 51).

To go the other way, from RGB to HEX, you convert each decimal channel back into a two-digit hexadecimal number and join them. A value of 87 becomes 57, and if a channel converts to a single digit you pad it with a leading zero so every channel is two characters. In practice, a free converter handles both directions instantly and removes any chance of an arithmetic slip.

When Should You Use HEX vs RGB vs HSL?

All three describe color and all three are fully supported in CSS, so the choice is about convenience for the task in front of you.

• HEX is best for pasting exact colors from a design tool or a brand style guide. It is compact and universally recognised.
• RGB and RGBA are best when you need transparency or when you are generating colors in code, since decimal numbers and a clear alpha value are easy to work with programmatically.
• HSL stands for hue, saturation, and lightness, and it is the most intuitive format for adjusting a color. To make a darker hover state you lower the lightness; to make a muted version you lower the saturation. This is why many design systems and frameworks build their palettes in HSL.

A practical workflow is to store brand colors as HEX, switch to RGBA when you need a semi-transparent overlay, and reach for HSL when you are building tints, shades, and interactive states. Our CSS color formats guide goes deeper on HSL and newer formats.

Advertisement

What Common HEX Codes Does Every Designer Need?

A handful of colors come up constantly. Here is a quick reference with both notations for each.

Notice the pattern in the pure colors: FF means a channel is fully on and 00 means it is off. Red is all red and no green or blue, white is all three channels at maximum, and black is all three at zero. Once you can read that pattern, many HEX codes become easy to estimate at a glance.

How Do You Use the Free HEX to RGB Converter?

The fastest way to convert is to let a tool do the maths. Our converter works entirely in your browser, so nothing is uploaded and there is no signup:

1. Open the tool. Go to the free HEX to RGB converter.
2. Enter your HEX code. Paste or type it with or without the leading hash.
3. Read the result. The tool shows the matching RGB value, and usually a live preview swatch so you can confirm the color at a glance.
4. Copy and use it. Drop the RGB value straight into your CSS or design file.

Whether you are matching a brand color, adding a transparent overlay, or just double-checking a value, converting between HEX and RGB takes seconds once you understand what the two formats represent. Bookmark the converter and keep this reference table handy, and you will rarely need to do the maths by hand again.

What Else Do People Ask?

How do you convert HEX to RGB?

Split the six-digit HEX code into three pairs, one each for red, green, and blue, then convert each pair from hexadecimal to a decimal number from 0 to 255. For example, #FF5733 becomes FF which is 255, 57 which is 87, and 33 which is 51, giving rgb(255, 87, 51). A free converter does this instantly.

What is the difference between HEX and RGB?

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

Is HEX or RGB better for web design?

Neither is better; they are equivalent and both are fully supported in CSS. HEX is convenient for pasting exact brand colors from design tools. RGB is handy when you need transparency through rgba or when generating colors in code. Many developers prefer HSL for adjusting colors, since it maps to hue, saturation, and lightness.

What does the alpha channel mean in a color code?

The alpha channel controls opacity, from fully transparent to fully solid. In RGB you add it with rgba(255, 0, 0, 0.5) for 50 percent opacity, and in HEX you can append two extra digits as an 8-digit code. It lets a color show what is behind it.

What is a 3-digit HEX code?

A 3-digit HEX code is shorthand where each digit is doubled to form the full 6-digit value. For example, #F53 expands to #FF5533. It only works when both digits of each channel are identical, so it is a compact way to write those specific colors.