This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
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.
(The spec even includes a section explaining how to convert RGB to HSL and vice versa.)
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!
Reply to Stefan
This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Stefan Judis | Sciencx (2021-09-18T22:00:00+00:00) rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost). Retrieved from https://www.scien.cx/2021/09/18/rgba-and-hsla-are-legacy-functions-and-aliases-in-modern-browsers-tilpost/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.