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);
}
Powered by Forestry.md