Opacity in CSS hex color notation

RRGGBBAA! What sounds like some guttural scream of a developer trying to vertically center something in a page without Flexbox, is actually a nifty new CSS property that is working its way into the specification in the form of CSS Color Module Level 4.

As the name suggests, this is the next evolution of color notion in web development. Including things like LCH (Lightness Chroma Hue ¹) colours and currentcolor. One of the more eye-catching sections of the spec for me is the new opacity notation for hex colors.

Where the common notations for hex colors are the shorthand three digits (#RGB) and six digits (#RRGGBB). The new additions are a new 8 and 4 digits color notations, adding one or two character space for the alpha (opacity) channel. No more translating to rgba if you want a slightly transparent color! Simply add another number to shorthand hex to opacity! Here is a quick sample of its usage:

span:nth-child(1) {
  /* Your regular RGB hex code. */ 
  background: #000;
}
span:nth-child(2) {
  /* A new hex code that is 90% opaque */ 
  background: #0009;
}
span:nth-child(3) {
  /* A new hex code that is 55% opaque */ 
  background: #00000055;
}

I also put together this CodePen demo for a more interactive demonstration: jamesrwilliams/pen/rNOjBLQ