Space-separated functional color notation

Unless you need to support old browsers, you can, and probably should, write colors using the newer space-separated syntax. That doesn’t get you anything extra for the sRGB-based notations we have already looked at, but as the newer color formats, which we will look at momentarily, also use the space-separated syntax, you may as well just use the same style for all.

So, space-separate the color values, and then if you need an alpha channel, add a forward slash (/) before adding the alpha as either a decimal value or a percentage.

For example:

.redness-alpha-rgba {
    color: rgb(254 2 8 / 0.8);
}

Or, if you prefer percentages:

.redness-alpha-rgba {
    color: rgb(254 2 8 / 80%);
}

So, now you know the syntax we will be using for all the new color formats, let’s cover some groundwork before taking an in-depth look.