HEX to RGB

A hex colour is just three bytes written in base sixteen, one per channel, which is why #ff0000 is pure red and #000000 is black. The shorthand catches people out: #123 is not a darker version of anything, it is literally #112233, because the specification expands each digit by duplicating it rather than padding it with a zero. Everything is parsed in your browser.

How it is calculated

R = int(hex[0:2], 16), G = int(hex[2:4], 16), B = int(hex[4:6], 16)

Each pair of hex digits becomes a number from 0 to 255. A fourth pair, when present, is the alpha channel and is divided by 255 to give the 0 to 1 value that CSS expects.

Source: W3C CSS Color Module Level 4 — hex notation: the first pair of digits specifies the red component, where 00 is the minimum and ff (255) the maximum; #123 specifies the same color as #112233

Questions people ask

Why does #123 equal #112233 rather than #012030?

Because the specification expands the shorthand by duplicating each digit, not by padding with zeros. The wording is explicit: "the notation #123 specifies the same color as the notation #112233".

What does the eight digit form mean?

The last pair is alpha, from 00 for fully transparent to ff for fully opaque. So #00000080 is black at roughly 50 percent opacity — 128 out of 255, which CSS writes as 0.502.

Is uppercase or lowercase correct?

Both. Hex digits are case insensitive, so #FF0000 and #ff0000 are the same colour. Lowercase is the more common convention in stylesheets.

Related tools