Sign in
Log inSign up

Understanding #rrggbbaa color notation

Alkshendra Maurya's photo
Alkshendra Maurya
·Sep 9, 2016

The new #rgba and #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 rgba().

Below is a comparison of how you would write colors in the current scheme v/s the new 8-digit hex scheme.

Comparison

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: #FFFFFFCC; // #RRGGBBAA Format
background: #FFFC; // #RGBA Format

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

Advantages

  • Colors will be very very quick to write especially with the #rgba shorthand.
  • 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.

Disadvantages

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. 😊

7