Wow! That must be the longest article that I have written in a while. If you made it here, thanks for reading!
In the article, we have:
- Seen the "classic" colors (HEX, RGB, HSL, and named colors)
- Explored the newly defined functions (HWB, Lab, LCH, CMYC, and
color()) - Reviewed the new space-separated syntax for the function.
- Checked how there are around 100 different ways of representing the same color in CSS (not counting the infinite possibility of fallbacks!)
And all that may lead people to ask a couple of questions:
Which color format should I use?
That is the million-dollar question, and there isn't a clear answer: some developers will say: "use the format that uses the least characters", some others will say "stick to HEX because it is more efficient" and many more will reply "but what about transparency?"...
Combining different formats just because they are shorter? That sounds like a bad idea as it would make the code less maintainable. And all for what? Saving a big total of 100 characters in a 20KB file?
Opting for a format that supports transparency/alpha and always having the value as 1? It seems a bit unnecessary. Ignoring the formats that support alpha and apply transparency via other methods? That could have nasty side effects.
Considering that most color functions now support alpha, the questions in the paragraph above may be outdated, but there are still browsers that may not support them.
The best recommendation would be: think about what you want to do with the color, and apply the format that is more convenient for your particular case.
What's next for CSS colors?
Many changes will happen in the CSS definition of colors. New functions will be added, more will be removed... and some will be added then removed before we are even able to use them (like the gray() function).
And the same thing with colors, properties, or arguments. As mentioned above, one of the beauties of the web standards is that they are alive and continuously changing to adapt and improve the experience.
We'll probably see new color functions popping up (hsv()?) even when they could be supported as part of the color() function. Although, let's go one step at a time, and hope for more support from the browsers.
Top comments (0)