Understanding #rrggbbaa color notation
#rrggbbaa color formats have been in consideration for several years and have just started to make their way into the browsers now.
The added aa in the previously present hex notation is the alpha value which defines the opacity of the color. This means that now you will be able to use colors with opacity without switching from hex notation to
Below is a comparison of how you would write colors in the current scheme v/s the new 8-digit hex scheme.
The current way for adding colors with opacity is to use an
rgba() notation, if you consider a white (#FFFFFF) color with 80% opacity, here's how you would write it in comparison to the new notation:
background: rgba(255,255,255,0.8); // rgba() Format background: background:
From the comparison, you would realize that the new system is very easy to write and comprehend.
Learning the Alpha
The value of alpha in the new hex notation would range from 00 to FF where 00 is the minimum value i.e 0% and FF is the max value which would be 100% opacity.
If you're aware of hexadecimal calculations, you'll easily be able to calculate the value of alpha based on the percentage of opacity that you need.
Calculating the hex code for 50% Alpha
Since the decimal values for opacity range from 0 to 255, in a traditional rgb notation; the value for 50% opacity would be 127, and hexadecimal value for this would be 7F
Here are some hex values that I get to see on a daily basis:
0% - 00
10% - 1A,
25% - 40,
50% - 7F,
75% - BF,
100% - FF
- Colors will be very very quick to write especially with the
- Colors are identifiable at the first glance because of a consistent notation followed everywhere.
- No switching between hex notation to rgba() while working with translucent colors thus adding in more consistency to the code.
The only disadvantage I see right now is the tricky part of calculating the hexadecimal alpha value. This, however can be subjective to the developer, and would get easier with time.
Most developers like to write their colors in a #hex notation and it's a real pain it is to switch from a
#hex notation to an
rgba() notation just for adding opacity to a color.
The new 8 digit hex notation solves this problem by adding an alpha to the existing notation.
Are you as excited as I am about this update? Let me know your thoughts in the comments. 😊
Learn Something New Everyday,
Connect With The Best Developers!
I allready have read about this some month ago and I like this new options. Especially the 4 digit notation.
Like you said, we get rid of the css-function and get a consistent style.