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
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Disable Autocomplete, Autocapitalize, and Autocorrect

    Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features.  Unfortunately these features can sometimes get in the way;  we don't always want or need the help they provide.  Luckily most browsers allow...

  • By
    Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

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!