8 Digit Hex Colors
One of the most requested capabilities in my early days of web development was the ability to set opacity on elements and even PNG images without the need for browser-specific CSS or hacks. Eventually we got native opacity support and even enjoyed rgba(), the ability to cite an opacity level with a color.
While I loved the ability to provide an opacity with color using rgba(), the use of hexadecimal color had always been ingrained in me, which made the sudden need for rgba conversions annoying. Luckily these days we have 8 digit hex values with allow us to cite an opacity level as the last two characters of the hex value!
The CSS
Hex implies "six" but the last two digits of the 8 character hex value are the opacity value:
.myElement {
/* { red/50% opacity } */
/* pink of white background */
background: #ff000080;
}
I love that we can use hexidecimal colors with the additional opacity value; needing to convert to rgba to take advantage of opacity was a needless frustration. I owe something to the creator of this API!
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![pointer Media Query]()
As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become. In order to write good CSS, we need some indicator about device capabilities. We've used CSS media queries thus far, with checks for max-width and pixel ratios.
![Image Reflections with CSS]()
Image reflection is a great way to subtly spice up an image. The first method of creating these reflections was baking them right into the images themselves. Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...
OK. This is good to know, not because I will ever use an 8 digit Hex colour, but because I need to build this into all my Hex colour validation routines!
Hi, thanks for that post, I haven’t heard of this before. I would like to point out that hex does not imply ‘six’ but is short for hexadecimal which are number to the base of 16. Because of that also your example has a problem. The alpha channel’s value is also in hex so 50 does not convert to 50% but instead to 80. Since the same logic from the color channels, minimum is 00 (0)maximum is ff (255), needs to be applied, a hex value of 50 (80) equals to 80/255 = ~31.3 %
best regards
Sebastian
It means that you can set opacity to 255%, right?
I’d like to point out that the last two digits are not percentages but also hexadecimal numbers (16 values, from 0 to F). If you want 50% red you’ll need #FF000080, #FF000000 is 0% red and #FF0000FF is 100% red.
Very nice! Unfortunately not the best browser support if you want to include IE or Edge: https://caniuse.com/#feat=css-rrggbbaa