8-Digit Hex Codes?

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.

The AA part is a hex representation of 0-100 is like:

0 = 00
1 = 03
2 = 05

9 = 17

10 = 1A
11 = 1C
12 = 1F

99 = FC
100 = FF

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.