Hex to RGB in CSS

#ff5733 is rgb(255 87 51) in CSS: ff is 255 red, 57 is 87 green and 33 is 51 blue. You rarely need to convert by hand, because CSS takes hex directly and treats the two as the same color. The tool below shows the same rgb(255 87 51), with HSL and OKLCH.

.button {
  color: #ff5733;
  color: rgb(255 87 51);     /* the same color, CSS Color 4 syntax */
  color: rgb(255, 87, 51);   /* the older comma syntax, still valid */
}

Chromium 153 and WebKit 26.6 compute all three as rgb(255, 87, 51): getComputedStyle keeps the comma form for these colors. CSS Color 4 also makes rgba() an alias of rgb(), so either name takes an alpha.

Adding transparency

Alpha is the usual reason to convert, and modern CSS can add it to the hex itself:

.overlay {
  background: #ff573380;                                  /* 8-digit hex: 0x80 is 128 of 255 */
  background: rgb(255 87 51 / 50%);                       /* alpha after a slash */
  background: rgb(from #ff5733 r g b / 50%);              /* relative color: keep the hex */
  background: color-mix(in srgb, #ff5733 50%, transparent);
}

What the browsers compute for each:

#ff573380                                      rgba(255, 87, 51, 0.5)
rgb(255 87 51 / 50%)                           rgba(255, 87, 51, 0.5)
rgb(from #ff5733 r g b / 50%)                  color(srgb 1 0.341176 0.2 / 0.5)
color-mix(in srgb, #ff5733 50%, transparent)   color(srgb 1 0.341176 0.2 / 0.5)

The relative syntax shines with a variable: rgb(from var(--brand) r g b / 50%) works on --brand: #ff5733, where the older trick needed the channels stored apart as --brand-rgb: 255 87 51 for rgb(var(--brand-rgb) / 50%). Inside it, r, g and b are numbers from 0 to 255 that calc() can change: rgb(from #ff5733 calc(r * 0.8) calc(g * 0.8) calc(b * 0.8)) scales each channel to 80%, a darker shade. Tailwind takes the color-mix() route: 4.1.11 compiles bg-[#ff5733]/50 to color-mix(in oklab, #ff5733 50%, transparent).

What doesn’t work

• rgba(#ff5733, 0.5) is Sass, not CSS. Sass compiles it to rgba(255, 87, 51, 0.5); in a plain stylesheet the browser drops the whole declaration.
• rgb(255 87 51 0.5) without the slash is invalid too.
• A hex code needs its #. ff5733 is ignored, except on a page with no doctype, where quirks mode accepts it.
• Four digits are alpha, not a short six. #f538 is rgba(255, 85, 51, 0.533).

Browser support

The first versions with full support, from MDN’s browser-compat-data 8.1.5:

• #rrggbbaa and #rgba: Chrome 62, Edge 79, Firefox 49, Safari 10.
• rgb(255 87 51 / 50%): Chrome 65, Edge 79, Firefox 52, Safari 12.1.
• color-mix(): Chrome and Edge 111, Firefox 113, Safari 16.2.
• rgb(from … r g b): Chrome and Edge 122, Firefox 128, Safari 18.

Chrome 119 to 121 and Safari 16.4 to 17.6 shipped earlier versions of the relative syntax where calc() on the channels gave the wrong numbers. Where older browsers matter, put a plain value first, since a browser skips a declaration it can’t parse:

background: rgb(255 87 51 / 50%);
background: rgb(from var(--brand) r g b / 50%);