8 Digit Hex Colors

Celý článek

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: #ff000050;
}

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!

The post 8 Digit Hex Colors appeared first on David Walsh Blog.