How to convert hex to RGB for CSS

A designer sends you a color as #FF5733. Your CSS needs rgb() — because you want to add alpha transparency, pass it to a canvas API, or match a system that only accepts numeric channels. The color is the same; you just need to convert the format.

The fastest way is to paste the hex value into a hex to RGB converter and copy the result. If you want to understand the math behind it, or if you need to convert a whole palette, read on.

How hex maps to RGB

A hex color like #FF5733 is made of three two-character pairs. Each pair is a base-16 (hexadecimal) number from 00 to FF, representing one color channel.

Pair	Channel	Hex	Decimal
FF	Red	FF₁₆	255
57	Green	57₁₆	87
33	Blue	33₁₆	51

To convert a hex pair to decimal, multiply the first digit by 16 and add the second digit. Each digit can be 0–9 or A(10)–F(15).

For 57:

• 5 × 16 = 80
• 7 × 1 = 7
• 80 + 7 = 87

So #FF5733 becomes:

rgb(255 87 51)

The # prefix is a CSS convention. The six characters themselves are the three channel values in hex.

3-digit shorthand hex

Some hex codes use only three characters, like #f53. This is shorthand: each digit is doubled to get the full value.

#f53  →  #ff5533

So f becomes ff, 5 becomes 55, and 3 becomes 33. The expanded version is:

#ff5533  →  rgb(255 85 51)

Shorthand can only represent colors where both digits in each pair are identical: #ff5533 shortens to #f53, but #ff5534 has no 3-digit form. CSS also supports a 4-digit shorthand like #f53a, where the fourth digit is alpha (transparency).

Using RGB in CSS

Modern CSS uses the space-separated syntax without commas:

color: rgb(255 87 51);
background: rgb(255 87 51);

Older CSS and many tutorials still use the comma form, which is equally valid:

color: rgb(255, 87, 51);

Both work in all modern browsers. The space-separated form also makes adding alpha easier — you use a slash:

/* 50% transparency */
background: rgb(255 87 51 / 0.5);

/* 10% transparency */
border-color: rgb(255 87 51 / 0.1);

With the comma syntax, you would need rgba() instead:

background: rgba(255, 87, 51, 0.5);

Both achieve the same result. The newer slash syntax is cleaner and consistent with how HSL handles alpha.

Converting a whole palette

If you have a full design palette in hex — say, 10–20 brand tokens — converting one at a time is tedious. A few approaches:

Use CSS custom properties. Define your palette once in hex, then convert only the colors you need in RGB. This reduces how many conversions you actually need.

:root {
  --brand-hex: #ff5733;
  --brand-rgb: 255 87 51;
}

/* Use hex where you don't need alpha */
.badge { background: var(--brand-hex); }

/* Use RGB where you need transparency */
.overlay { background: rgb(var(--brand-rgb) / 0.2); }

Batch-convert with a converter. Some hex to RGB converter tools let you convert multiple values at once, which is faster than going one by one.

Use a preprocessor. In Sass, color.red(), color.green(), and color.blue() extract channel values. PostCSS can do similar things at build time.

British vs American spelling

CSS documentation and most code uses “color” (American English). You will also see “colour” (British/Australian English) in tutorials, design briefs, and search queries.

They mean the same thing. In CSS, the property is always spelled color regardless of where you are writing from. Search engines understand both spellings when you are researching conversions, so “colour hex to rgb” and “color hex to rgb” will return the same results.

When to use hex vs RGB

The short answer: use hex for static palette values, and RGB when you need transparency or numeric channels.

If you are unsure which color format fits your situation — or when HSL might be a better choice — the guide on hex vs RGB vs HSL covers the differences in more detail.

Bottom line

To convert hex to RGB: split the hex code into three two-character pairs, convert each pair from base 16 to decimal, and plug the three numbers into rgb(). For 3-digit shorthand, double each digit first. If you need transparency, use rgb(R G B / alpha) with the slash syntax. For quick conversions without the math, the hex to RGB converter handles the calculation instantly and shows the CSS-ready output.