HEX to RGB converter

A HEX color is three bytes written in base 16, one byte per channel. Each byte is two hex digits, and each digit is worth 0 to 15 (0-9, then A=10 to F=15). The first digit counts sixteens, the second counts ones.

#FF5733
 RR GG BB

FF = 15 × 16 + 15 = 255   → red
57 =  5 × 16 +  7 =  87   → green
33 =  3 × 16 +  3 =  51   → blue

#FF5733 = rgb(255, 87, 51)

Because two hex digits hold exactly 256 values, every HEX code maps to one RGB value and back, with no rounding. That is why the converter can show the result as exact integers.

CSS accepts four lengths. The short forms repeat each digit; the 4 and 8-digit forms add alpha (opacity) at the end.

Alpha in hex is a byte too: 00 is fully transparent, FF fully opaque, and 80 (128) is 128 / 255 ≈ 0.502, a little over half. Watch out for Android and Flutter, which put alpha first (0xAARRGGBB). The converter reads 0x80FF5733 in that order.

Note that CSS green is #008000 (rgb(0, 128, 0)), not #00FF00; the full-intensity green is called lime.

JavaScript

function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length <= 4) h = [...h].map(c => c + c).join(''); // #F53 -> FF5533
  const n = i => parseInt(h.slice(i, i + 2), 16);
  const a = h.length === 8 ? +(n(6) / 255).toFixed(3) : 1;
  return { r: n(0), g: n(2), b: n(4), a };
}
hexToRgb('#FF573380'); // { r: 255, g: 87, b: 51, a: 0.502 }

Python

def hex_to_rgb(code: str) -> tuple[int, int, int]:
    h = code.lstrip('#')
    if len(h) == 3:
        h = ''.join(c * 2 for c in h)
    return tuple(int(h[i:i + 2], 16) for i in (0, 2, 4))

hex_to_rgb('#FF5733')  # (255, 87, 51)

Go

v, err := strconv.ParseUint(strings.TrimPrefix("#FF5733", "#"), 16, 32)
if err != nil { /* not a hex color */ }
r, g, b := uint8(v>>16), uint8(v>>8), uint8(v) // 255 87 51

Bash

hex=FF5733
printf 'rgb(%d, %d, %d)\n' 0x${hex:0:2} 0x${hex:2:2} 0x${hex:4:2}   # rgb(255, 87, 51)

The tool also shows HSL, OKLCH and other formats, the nearest Tailwind color, and contrast against white and black, so you can tell right away if the color works for text. Going the other way? Use the RGB to HEX converter. For every format at once, with a custom background for the contrast check, use the color converter. To turn a single hex number into decimal, the hex to decimal converter shows the place values.

Building a design system? Browse design tools and Tailwind CSS tools launched on DevHunt.