New
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.

# Understanding #rrggbbaa color notation

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

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

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.