As per the CSS Colors Module Level 4 specification, you can use space-separated values for all CSS color functional notations. The following table shows the old comma-separated syntax and its equivalent using the new space-separated syntax:
| Color Space | Comma-Separated | Space-Separated |
|---|---|---|
| rgb | rgb(0, 255, 234) |
rgb(0 255 234) |
| rgba | rgba(0, 255, 234, 0.5) |
rgb(0 255 234 / 50%) |
| hsl | hsl(175, 100%, 50%) |
hsl(175deg 100% 50%) |
| hsla | hsla(175, 100%, 50%, 0.5) |
hsl(175deg 100% 50% / 50%) |
Other than these, the lab(), lch() and color() functional notations also support the space-separated syntax. However, they do not support the old comma-separated syntax. To keep things uniform, perhaps it's a good idea to start using the new space-separated syntax. It is supported by all major browsers.
In the new syntax, you can specify the alpha channel using rgb() and hsl() instead of using rgba() and hsla() (which merely exist as an alias to rgb() and hsl() as per the new spec).
When using the CSS Colors 4 space-separated values, the alpha channel value can either be a number between 0 and 1 or a percentage between 0 and 100%.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.