Colors in CSS: Hello Space-Separated Functional Color Notations

There are several ways to notate color values in CSS. Basically we have three options:

  1. Use of Keyword: e.g. black
  2. Hexadecimal Notation: e.g. #000000, #000, and #000000FF
  3. Functional Notation: e.g. rgb(0, 0, 0), rgba(0, 0, 0, 1) (and the hsl()/hsla() variants)

~

In the CSS Color Module Level 4 specification, there’s a new way to writing the Functional Notation: using spaces.

rgb(), rgba(), hsl(), and hsla() have all gained a new syntax consisting of space-separated arguments and an optional slash-separated opacity.

Above that rgba() has become an alias for rgb(), so our colors in CSS – using the Functional Notation – will soon look as follows:

/* Before: Comma-Separated Functional Color Notation */
div {
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 1);
}

/* After: Space-Separated Functional Color Notation */
div {
  color: rgb(0 0 0);
  color: rgb(0 0 0 / 1);
  color: rgb(0 0 0 / 100%);
}

~

You should start writing your colors using this new syntax today, as:

  1. The syntax is already supported by all major browsers.
  2. New color functions – such as lab(), lch() and color() – will only support the space-separated syntax

Your preprocessor can take care of older browsers 😉

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

About the Author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.