The road ahead for color in CSS

2020-03-30

I was perusing the CSS documentation and was surprised to see some major changes to how colors will be used in CSS as presented in CSS Color Module 4. It’s an exciting development but also changes how some of the most-used values (that is, color values) will look in the future. By major change, I guess I actually mean a small change to a feature so common that it feels like a major change.

From the first example block in the document featuring CSS:

em { color: rgb(0 255 0); } /* RGB range 0-255 */

Where are the commas? They are gone! In the future, it looks like we’ll be able to write colors without commas.

From another example a bit further in, here’s a color with an opacity value:

rgb(0 0 100% / 80%);

That’s not a typo, the rgb function is being used – instead of rgba – to set the transparency of a color. As of this upcoming specification, rgba will only be retained for legacy reasons.

Fascinating!