Colors in CSS: Hello Space-Separated Functional Color Notations

In CCS there are several ways to notate color values. Basically we have three options:

1. Using a 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)

~

The CSS Color Module Level 4 specification adds an extra variation to the Functional Notation: it allows you to separate the individual RGB (or HSL, etc.) values using spaces instead of commas, e.g. rgb(0 0 0);.

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 such as IE11 😉

~