Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

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!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 11 days ago.

Related Topics

Related Articles