Alpha channel in hex colors #RRGGBBAA

In the past if I've needed to give a hex color an opactiy I would use the opacity attribute, like this:

div {
  background-color: #cecece;
  opacity: 0.5;
}

But as of Chrome 62/Firefox 49/CSS Color Module Level 4 you can now include the alpha channel information into the hex code:

div {
  background-color: #cecece88;
}

And if you are using the shortened version of the hex color it looks like this:

div { 
  background-color: #ccc8;
}

Check out the MDN Docs

Tweet