How to Convert a HEX Color to RGB for CSS (Formula, Examples and Free Tool)

You have a HEX code and your CSS needs RGB. Maybe you want to add transparency. Maybe a design token only accepts rgb(). Maybe you are just curious what those six characters actually mean.

I work with color values in stylesheets all the time, and this is one of the conversions I do most often. The good news is that it is simple arithmetic. In this guide I will show you how to convert a HEX color to RGB by hand, how to handle shorthand and alpha codes, how to write the result in modern CSS, and how to skip the math when you are in a hurry.

What Is the Fastest Way to Convert a HEX Color to RGB?

The fastest way is to split the HEX code into three pairs and turn each pair into a decimal number from 0 to 255. The first pair is red, the second is green, and the third is blue. For example, #3B82F6 becomes rgb(59, 130, 246).

If you do not want to calculate anything, paste the code into a converter. I built the workflow around the HEX to RGB converter on this site because it gives you the rgb() string ready to copy. For a one-off conversion that takes a few seconds. For understanding what is happening, keep reading.

How HEX and RGB Describe the Same Color

HEX and RGB are two ways of writing the same red, green, and blue intensities. Converting between them never changes the color. It only changes the notation.

RGB uses decimal numbers. Each channel runs from 0 to 255, where 0 means none of that light and 255 means full intensity. So rgb(255, 0, 0) is pure red.

HEX uses base 16 instead of base 10. Each channel gets two characters, and each character can be 0 to 9 or A to F. Two hexadecimal characters can express 256 values, which is exactly the range of one RGB channel. That is why the match is so clean.

Here is the mapping in one line:

#RRGGBB becomes rgb(RR, GG, BB), with each pair converted from base 16 to base 10.

Once you see that, the conversion stops feeling like a trick. It is just reading the same three numbers in a different counting system.

How to Convert HEX to RGB Manually, Step by Step

To convert manually, split the code into pairs, convert each hexadecimal digit to its decimal value, multiply the first digit of each pair by 16, and add the second digit. Do this three times and you have your RGB values.

First, you need the digit values. Digits 0 to 9 keep their normal value. The letters map like this: A is 10, B is 11, C is 12, D is 13, E is 14, and F is 15.

Let me walk through #3B82F6.

1. Remove the hash and split the code: 3B, 82, F6.
2. Convert red, 3B: 3 × 16 = 48, then add B, which is 11. The result is 59.
3. Convert green, 82: 8 × 16 = 128, then add 2. The result is 130.
4. Convert blue, F6: F is 15, so 15 × 16 = 240, then add 6. The result is 246.
5. Write the result: rgb(59, 130, 246).

Now a second example with #1E90FF. Red is 1E, which is 1 × 16 + 14 = 30. Green is 90, which is 9 × 16 + 0 = 144. Blue is FF, which is 15 × 16 + 15 = 255. The final value is rgb(30, 144, 255).

A useful sanity check: FF is always 255 and 00 is always 0. If you see those pairs, you can fill them in without any math. A code like #FF0000 is obviously rgb(255, 0, 0).

The manual method matters when you want to understand the system or check a tool’s output. In daily work, I rarely do it more than once or twice a week.

How to Convert 3-Digit Shorthand HEX to RGB

To convert a 3-digit HEX code, double each digit to expand it into six digits, then convert as normal. The shorthand #F57 expands to #FF5577, which is rgb(255, 85, 119).

Shorthand exists as a typing shortcut. It only works when each pair is made of two identical characters. That means #FF5577 can be shortened to #F57, but #FF5578 cannot be shortened at all.

A common error is to pad the shorthand with zeros, which turns #F57 into #F57000. That gives a completely different color. Always repeat the digit, never add zeros.

Four-digit shorthand follows the same rule and adds alpha. #F578 expands to #FF557788. I will cover how to read that alpha value next.

How to Convert 8-Digit HEX (With Alpha) to RGBA

An 8-digit HEX code is a 6-digit code with a fourth pair at the end for opacity. To convert it, turn the first three pairs into RGB as usual, then divide the last pair’s decimal value by 255 to get the alpha value for rgba().

Here is a real example. Take #FF573380. The color part, FF5733, converts to rgb(255, 87, 51). The alpha part, 80, equals 128 in decimal. Dividing 128 by 255 gives about 0.5. The final value is rgba(255, 87, 51, 0.5).

The alpha pair runs from 00, fully transparent, to FF, fully opaque. Because CSS rgba() expects a decimal from 0 to 1, you always need that division step. Skipping it is the most common alpha mistake I see.

This reference table covers the opacity levels people use most:

So a 75% opaque version of #2563EB is #2563EBBF in 8-digit HEX, and rgba(37, 99, 235, 0.75) in classic CSS.

One caution. A plain 6-digit HEX code has no alpha at all. If you convert it to RGB, you get three numbers and nothing else. You only get transparency when you add the alpha yourself or start from an 8-digit code.

How to Write the RGB Value in CSS

You can write the converted value in CSS with either the classic comma syntax or the modern space syntax. Both produce identical results, and both work in current browsers.

The classic form looks like this:

.button {
  background-color: rgb(59, 130, 246);
  border-color: rgba(59, 130, 246, 0.5);
}

The modern form drops the commas and uses a slash for alpha:

.button {
  background-color: rgb(59 130 246);
  border-color: rgb(59 130 246 / 50%);
}

In modern CSS, rgb() and rgba() are aliases. You can put an alpha value inside plain rgb(), and rgba() still works for older code. I keep the legacy syntax when a project already uses it, and use the modern one in new files. Consistency inside one codebase matters more than which style you pick.

Here is a pattern I like for design systems. Store the channels once as a custom property, then reuse them with different opacities:

:root {
  --brand-rgb: 59 130 246;
}

.card {
  background: rgb(var(--brand-rgb) / 0.08);
  border: 1px solid rgb(var(--brand-rgb) / 0.4);
  color: rgb(var(--brand-rgb));
}

You convert the HEX value one time, and every tint or overlay comes from the same source. That is much easier to maintain than a dozen separate rgba() values.

Newer browsers also support relative color syntax, such as rgb(from #3B82F6 r g b / 50%), which lets you modify a HEX color directly without converting it first. Browser support is good in recent versions but not universal, so check your audience before relying on it.

How to Convert HEX to RGB in JavaScript

In JavaScript, you can parse the HEX string as a base-16 integer and extract each channel with bit shifts. This is the shortest reliable way to convert a HEX color to RGB in code.

function hexToRgb(hex) {
  let h = hex.replace('#', '');
  if (h.length === 3) {
    h = h.split('').map(c => c + c).join('');
  }
  const n = parseInt(h, 16);
  return {
    r: (n >> 16) & 255,
    g: (n >> 8) & 255,
    b: n & 255
  };
}

hexToRgb('#3B82F6'); // { r: 59, g: 130, b: 246 }

The function strips the hash, expands shorthand, parses the number, and then shifts bits to isolate red, green, and blue. It handles 3 and 6 digit codes. If you also need 8-digit codes, slice the last two characters first and divide their parsed value by 255.

Add validation before you ship this anywhere real. Check that the cleaned string is 3, 4, 6, or 8 characters long and contains only valid hexadecimal characters. Bad input otherwise produces NaN values that quietly break styles.

When Should You Use RGB Instead of HEX in CSS?

Use RGB when you need transparency, when you want to do math on channels, or when a tool or API expects separate numbers. Use HEX when you want a compact, copy-friendly value for a solid color.

Here is how I decide in practice:

• Overlays, shadows, and tints. rgba() or slash syntax is clearer than an 8-digit HEX code to most people reading the stylesheet.
• JavaScript and canvas work. Canvas, WebGL, and many charting libraries want numeric channels.
• Design tokens. Splitting a color into channels makes it easy to generate opacity variants.
• Handoff between tools. Some design apps show RGB by default, so you need to match what the designer sees.
• Plain solid colors. HEX is shorter and fine.

Neither format is better in terms of rendering. They produce the same pixels. The choice is about readability and workflow.

Common Mistakes When You Convert a HEX Color to RGB

Most conversion errors come from a small set of habits. These are the ones I see most often.

Forgetting the digit values for letters. People remember that A is 10 but forget that F is 15. A wrong letter value shifts the whole channel.

Expanding shorthand with zeros. As covered above, #F57 is #FF5577, not #F57000.

Treating the alpha pair as a percentage. The last two characters in an 8-digit code are a base-16 byte. 80 does not mean 80%. It means 128 out of 255, which is roughly 50%.

Putting alpha in the wrong place. In HEX, alpha comes last. Some other systems, such as certain Android color formats, put it first. If a color looks wrong, check the byte order.

Rounding too early. When you convert alpha, keep a few decimal places during the math. Rounding 0.502 to 0.5 is fine at the end, but not in the middle of a calculation.

Mixing up invalid characters. HEX only allows 0 to 9 and A to F. A stray G or O makes the whole value invalid.

How to Convert a HEX Color to RGB Without Doing the Math

If you convert colors often, an online converter saves time and removes arithmetic errors. Paste the code, and the tool returns the rgb() value instantly.

I recommend starting with the HEX to RGB converter on Visiblytics. You enter a code and copy the result straight into your stylesheet. It is built for exactly the CSS use case this guide covers.

Two related tools help with the rest of the workflow:

• Going the other direction? The RGB to HEX converter turns rgb() values back into a HEX code, which is useful when a design tool gives you channels and your style guide uses HEX.
• Do not have a code yet? The color picker lets you choose a color visually and read its HEX and RGB values together.

Other sites offer similar converters too, and several of them also work well, including a number of developer-focused utility pages and open-source libraries. The right one is whichever fits your workflow. For quick CSS work where you want copy-ready output, I find the tools above the most direct.

Quick Reference: Common HEX to RGB Values

This table covers colors you will hit often. Bookmark it or keep it near your editor.

Final Thoughts

Learning to convert a HEX color to RGB takes about five minutes, and you will use it for years. The method is always the same: split into pairs, convert each pair to a number from 0 to 255, and write the result in rgb() or rgba().

Remember the few edge cases. Expand shorthand by doubling digits. Divide the alpha pair by 255. Pick the CSS syntax that matches your project. And when you just need a fast, accurate answer, use a converter and move on.

If you work with colors often, keep the HEX to RGB converter and the color picker within reach. They remove the arithmetic and let you focus on the design.