Alpha Transparency In Hex

Maybe early days, but coming to a browser near you some day: alpha transparency in 8 digits hex notation; currently supported in Chrome Canary and Firefox Nightly. Some thoughts here on how and why this could be useful.

Now HEXA doesn’t have the most intuitive syntax, HSLA has, and the alpha transparency isn’t making live easier. But we have tools for this build right into the browser: you can check this out in Chrome Canary or in Firefox Nightly DevTools:

Use case in color templating

So what could use cases for HEXA be? Maybe easier color manipulation in javaScript for some, but also templating. Consider this code snippet in a template for Prism syntax-highlighting in Base16 Builder:


.line-highlight {
  background: #<%- base["D0"]["hex"] %>33;
  background: linear-gradient(to right, #<%- base["D0"]["hex"] %>33 70%, #<%- base["D0"]["hex"] %>00);
}

Which (for one colorscheme) would compile to this CSS:


.line-highlight {
  background: #bc672f33;
  background: linear-gradient(to right, #bc672f33 70%, #bc672f00);
}

Because Base16 schemes only allows color-values for variables to be defined in HEX notation in schemes, these color-variables can now be manipulated by adding 2 digits after the variables in templates, and by doing so give those colors alpha transparency (in browsers that support it).

To see if your browser supports alpha transparency in 8 digits hex notation: Unfortunately your browser does not support alpha transparency in HEX yet
Your browser supports alpha transparency in HEX!
And/or checkout this demo.

Resources

This article was also published on Codepen