# Understanding #rrggbbaa color notation

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. ðŸ˜Š

Learn Something New Everyday,**Connect With The Best Developers!**

JS enthusiast

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.

Well, but now we have browsers that are only supporting `rgba()`

notation. It will take time before it's worth switching to the new format.

Frontend Engineer | Hashnode Alumnus

@vwochnik thereâ€™s support in the latest versions of almost all browsers, though I agree that weâ€™ll need to wait a while before using it in production

Developer

Nice to know. It's very helpful to me. Thank you. Please check my online rgba color picker tool.

Developer

Nice to know. It's very helpful to me. Thank you. Please check my online rgba color picker tool.

## Comments (3)