Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

8 Digit Hex Colors

By  on  

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Image Reflection with jQuery and MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...

  • By
    Create Twitter-Style Buttons with the Dojo Toolkit

    I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static...

Discussion

  1. Charles

    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!

  2. Sebastian

    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

  3. Aleksandar

    It means that you can set opacity to 255%, right?

  4. Koen

    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.

  5. Marcel

    Very nice! Unfortunately not the best browser support if you want to include IE or Edge: https://caniuse.com/#feat=css-rrggbbaa

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!