One thing hidden somewhere in the CSS specifications is the fact that you can use four or eight digits to represent a hexadecimal color, three or six to represent the color and one or two to represent the alpha transparency. For clarity’s sake, the post will only cover the eight-digit version.
What is this?
If you’re familiar with the RGB/RGBA color space in CSS you will see two different types of color, one solid color and one with some level of transparency.
RGB colors use values from 0 to 255 or 1 to 100% to represent color and values from 0 to 1 to represent transparency.
The example below shows an example of RGB and RGBA colors and how they look in the browser.
Partially transparent: rgba(6,52,164, .45)
Fully Opaque: rgba(6,52,164, 1)
Hex and Hex + Transparency Colors
For most developers (myself among them), Hexadecimal (hex) colors are the first type of colors we’ve used with CSS.
It came as a surprise that you could expand the format to include alpha channel transparency.
The following examples show three of the syntaxes available for Hex colors:
- The traditional 6 digit syntax
- The “new” 8 color syntax using full opacity
- The “new” syntax using transparency
Fully Opaque:; #0634a4
Fully Opaque (with trasparency): #0634a4ff
Partially transparent: #0634a466
The hardest part of this is to figure out how transparency works in hexadecimal numbers.
Remember that RGBA colors work with transparency between 0 and 1, but working with values from 00 to FF is conceptually harder (at least for me). It’ll take a lot of trial and error to get the numbers right.
Browser support is pretty good with Edge, the last outlier coming into the fold once the Chromium version of Edge goes into regular release.