Webmasters Gallery

Weird right? 4-digit hex codes too. They are a way put alpha transparency information into the hex format for colors. You might be seeing it more all the sudden if you use Chrome, because it dropped in 52, and the DevTools seem to be defaulting to showing alpha transparent colors in this format even if you set it originally using something else.

Firefox supports it too, for the record.

Let’s look at how it works:

.element {

  /* This is green */
  background: rgb(0, 255, 0);

  /* It's the same as this */
  background: #00ff00;

  /* We could make it 50% transparent like this */
  background: rgba(0, 255, 0, 0.5);

  /* Or, with an alpha hex like this */
  background: #00ff0080;

}

Those last two digits represent the alpha transparency. But wait… the last two digits are “80”, not “50”. We’ll get to that.

First, remember how three digit hexes work?

.element {

  /* This */
  background: #900;

  /* Is the same as this */
  background: #990000;

}

It’s each digit doubled up. It’s the same way with four digits.

.element {

  /* This */
  background: #0f08;

  /* Is the same as this */
  background: #00ff0088;

}

The formats are sometimes referred to as #RRGGBBAA and #RGBA.

So how do you fit an “R” value (or “B”, or “G”, or “A”, for that matter) that is normally 0-255 (or 0.00 – 0.10) into just two digits? Alphanumerics!

0 = 00
1 = 01
2 = 02
…
9 = 09
10 = 1A
… then it starts to get weird …
11 = 1C
12 = 1F
… whatever, someone figured it out and it works …
254 = FE
255 = FF

It’s easy to find a converter.

That’s why “80” was really “50% transparency” in the example up top.

Also, here’s a chart that I adapted from here:

See the Pen XjbzAW by Chris Coyier (@chriscoyier) on CodePen.

Should you use it?

Probably not. It’s not very well supported yet and doesn’t have any advantages over rgba() or hsla(), other than, I suppose, a tiny amount of saved bytes.

8-Digit Hex Codes? is a post from CSS-Tricks