HEX to RGB Converter

A CSS hex color and its RGB equivalent describe exactly the same color — hex just packs the same three (or four, with alpha) numbers into a compact string instead of writing them out. The reason to convert one to the other is almost always that some specific API or piece of code wants the numbers spelled out: a Canvas 2D context’s pixel manipulation methods, a WebGL shader uniform, an image-processing library reading raw channel values, or any JavaScript object that models a color as { r, g, b, a } rather than accepting a CSS string.

The conversion itself is a straightforward split-and-parse: a 6-digit hex like #3b82f6 breaks into three 2-digit pairs — 3b, 82, f6 — and each pair is parsed as a base-16 (hexadecimal) number to get a 0-255 channel value (3b → 59, 82 → 130, f6 → 246). An 8-digit hex adds a fourth pair for alpha, but that byte doesn’t stay 0-255 in the output — CSS’s rgba() expects alpha as a 0-1 fraction, so the byte gets divided by 255 (80 in hex is 128 in decimal; 128 / 255 ≈ 0.5). This is the one place the two formats genuinely use different units for the same underlying data, and it’s the detail most hand-written hex-to-rgb conversions get subtly wrong by treating alpha the same as the other three channels.

A hex color with an alpha channel is common specifically because a fully opaque color rarely needs converting for its own sake — the moment you need transparency (an overlay, a hover state, a subtle shadow tint), you’re almost always about to hand that color to something expecting numeric RGBA, whether that’s a Canvas fillStyle, a box-shadow you’re generating programmatically, or a design token pipeline that stores colors as objects rather than strings.

Converting hex to RGB(A) programmatically

JavaScript, parsing the hex string directly and feeding the result straight into a Canvas 2D context:

function hexToRgba(hex) {
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return { r, g, b, a };
}

const { r, g, b, a } = hexToRgba("#3b82f680");
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
// r=59, g=130, b=246, a=0.5019607843137255

Python, for image or data-processing code:

def hex_to_rgba(hex_color):
    h = hex_color.lstrip("#")
    r, g, b = int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)
    a = int(h[6:8], 16) / 255 if len(h) == 8 else 1.0
    return r, g, b, a

print(hex_to_rgba("#3b82f680"))
# (59, 130, 246, 0.5019607843137255)