Converting a hex color code like #FF6B6B to its RGB equivalent is one of those tasks every front-end developer hits sooner or later. Whether you're building a color picker, a design system, or manipulating canvas pixels, you need a reliable conversion function.

Here are 5 battle-tested methods, from the simplest one-liner to a fully defensive production function. All code is copy-ready.

Method 1: parseInt with substring slicing (recommended)

The clearest, most readable approach. Strip the #, slice the string into three pairs, convert each from base-16 to decimal.

JavaScript
function hexToRgb(hex) {
  hex = hex.replace(/^#/, '');
  if (hex.length === 3) {
    hex = hex[0]+hex[0] + hex[1]+hex[1] + hex[2]+hex[2];
  }
  return {
    r: parseInt(hex.slice(0, 2), 16),
    g: parseInt(hex.slice(2, 4), 16),
    b: parseInt(hex.slice(4, 6), 16)
  };
}

hexToRgb('#FF6B6B');  // { r: 255, g: 107, b: 107 }
hexToRgb('#F6B');     // { r: 255, g: 102, b: 187 }

Method 2: Regex (compact, with null safety)

A single regex handles both 3- and 6-digit inputs and returns null for invalid input — safe to use without try/catch.

JavaScript
function hexToRgb(hex) {
  // Matches both #RGB and #RRGGBB
  const m = hex.match(/^#?([a-f\d]{1,2})([a-f\d]{1,2})([a-f\d]{1,2})$/i);
  if (!m) return null;
  return ['r','g','b'].reduce((acc, key, i) => {
    const v = m[i+1];
    acc[key] = parseInt(v.length === 1 ? v+v : v, 16);
    return acc;
  }, {});
}

hexToRgb('#FF6B6B');  // { r: 255, g: 107, b: 107 }
hexToRgb('invalid');  // null — safe!

Method 3: Bitwise operators (performance-optimized)

Bitwise shifts avoid string operations entirely. Marginally faster in tight loops over thousands of colors (e.g., image processing).

JavaScript — bitwise
function hexToRgbBitwise(hex) {
  const n = parseInt(hex.replace('#', ''), 16);
  return {
    r: (n >> 16) & 255,
    g: (n >> 8)  & 255,
    b:  n        & 255
  };
}

hexToRgbBitwise('#FF6B6B');  // { r: 255, g: 107, b: 107 }
⚠ Bitwise caveat
This method does not handle 3-digit shorthand (#RGB) or alpha channels. Use it only when you know the input is always a clean 6-digit hex.

Method 4: Canvas API (any valid CSS color)

The browser can parse any CSS color string via the Canvas API. Use this when you need to accept named colors, HSL, or other formats alongside hex.

JavaScript — Canvas API (browser only)
function cssColorToRgb(color) {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = 1;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, 1, 1);
  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
  return { r, g, b, a };  // a is 0-255, not 0-1
}

cssColorToRgb('#FF6B6B');      // { r: 255, g: 107, b: 107, a: 255 }
cssColorToRgb('coral');        // { r: 255, g: 127, b: 80,  a: 255 }
cssColorToRgb('hsl(0,80%,70%)');  // Works too!

Method 5: CSS custom properties trick (framework-friendly)

If you're already using CSS variables for your color system, you can read RGB values directly from computed styles — no manual conversion needed.

CSS + JavaScript
/* In your CSS — store raw channel values (not rgb()) */
:root {
  --brand: 99 102 241;
}

/* In JavaScript — read and parse */
function getCSSColorRgb(varName) {
  const raw = getComputedStyle(document.documentElement)
    .getPropertyValue(varName).trim();  // e.g. "99 102 241"
  const [r, g, b] = raw.split(' ').map(Number);
  return { r, g, b };
}

getCSSColorRgb('--brand');  // { r: 99, g: 102, b: 241 }

Which method should you use?

⚡ Pro tip — TypeScript signature
function hexToRgb(hex: string): \{ r: number; g: number; b: number \} | null — return null on invalid input and let TypeScript force callers to handle the edge case.

Need to convert colors right now?

Use our free online tool — paste any hex code, get RGB, RGBA, HSL, HSV instantly.

Open the Converter →

Related Articles

← The Complete Guide to Hex to RGB Conversion — covers the full theory, formula, Python code, and CSS usage.

What are hex color codes? — beginner-friendly explainer.