The modern way
These days you can add the alpha channel without the "a".
/* red, 50% opacity */
.red-50 {
color: rgba(255, 0, 0, 0.5);
}
/* red, 50% opacity - this works*/
.red-50 {
color: rgb(255, 0, 0, 0.5);
}
If you opt to use the space-separated syntax, you need to use a forward slash before the alpha value:
/* red, 50% opacity */
.red-50 {
color: rgb(255 0 0 / 0.5);
}
/* red, 50% opacity - hsl color system */
.red-50 {
color: hsl(0deg 100% 50% / .5);
}