Published at
Updated at
Reading time
1min

I still define my CSS colors in hex values. 💪 rgb(), rgba(), hsl() and hsla() are valuable CSS functions, but it's so cumbersome to convert hex values (#34aa44) to numbers or percentages. That's why I never adopted the color functions.

My rare usage is why I missed that the CSS Color Module Level 4 spec made rgba() and hsla() redundant.

The specification introduced two changes:

  • rgb()/hsl() accept alpha values.
  • Color functions accept space-separared values.

With rgb()/hsl() accepting transparency values, hsla() and rgba() became legacy functions and are now aliases for rgb()/hsl().

If you worry about browser support, check MDN. rgb()/hsl() transparency values are well supported!

The second edition is a new space-separated syntax, that improves readability:

/* evolution of the rgb function with transparency */
rgba(255, 255, 255, 50%)
rgba(255 255 255 / 50%)
rgb(255 255 255 / 50%)

/* evolution of the hsl function with transparency */
hsla(235, 100%, 50%, 50%) 
hsla(235 100% 50% / 100%)
hsl(235 100% 50% / 100%)

These two new features made color handling easier! You don't have to worry about color functions that do or don't support transparency, and the space/slash syntax highlights seperates values and makes it easier to read. I love it when CSS becomes more precise!

If you enjoyed this article...

Join 6.3k readers and learn something new every week with Web Weekly.

Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles