Hex to RGB Color Converter

Reading a Hex Color Code

A CSS hex color code like #FF5733 encodes three 8-bit channels in 6 hexadecimal digits. The first two digits are red, the middle two are green, and the last two are blue. Reading FF as decimal gives 255 (full red). 57 is 87 (moderate green). 33 is 51 (low blue). Combined, this produces a warm orange-red. Once you understand this structure, you can approximate any hex color by eye — dark values start with 0–3, mid-range with 7–8, bright values with C–F.

3-Digit Hex Shorthand

CSS allows a 3-digit shorthand when both digits of each channel are the same: #FFF expands to #FFFFFF (white), #000 to #000000 (black), #F00 to #FF0000 (pure red). To expand: duplicate each digit. #A3C becomes #AA33CC. This converter handles both formats automatically.

Using RGB Values in JavaScript

When working with the Canvas API, WebGL, or image processing libraries, you often need integer RGB values rather than hex strings. Node.js image libraries like Sharp accept rgb(r, g, b) objects. The CSS-in-JS library Emotion's color utility functions work with { r, g, b } objects. Matplotlib and Pillow in Python also accept (r, g, b) tuples.

// JavaScript — parse hex to { r, g, b }
function hexToRgb(hex) {
  hex = hex.replace(/^#/, '');
  if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  return { r, g, b };
}
hexToRgb('#FF5733'); // → { r: 255, g: 87, b: 51 }

// Python
def hex_to_rgb(hex_str):
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
hex_to_rgb('#FF5733')  # → (255, 87, 51)

Accessibility: Contrast Ratios Need RGB

WCAG colour contrast calculations require relative luminance, which is derived from linear RGB values. You must first convert hex to RGB, then linearise each channel (gamma correction), and finally compute luminance. The colour contrast checker on this site does this automatically, but understanding hex-to-RGB conversion is the first step.

Frequently Asked Questions