Opacity

All the colors we have seen so far have been opaque. We can also set the transparency level for colors. For example, with RGB:

color: rgba(255, 0, 0, 75%);

Notice that we changed from rgb to rgba, where a stands for alpha. When the alpha value is 75%, the text is 75% visible and 25% transparent.

It works similarly with hexadecimal values:

color: #FF0000BF;

We added 2 characters at the end, which represent the transparency. The higher these characters are, the more visible the text is and therefore less transparent. This color will be the same as the RGB color above, although it may not be immediately apparent.

HSL changes in the same way as RGB:

color: hsla(0, 100%, 50%, 75%);

Again, we see that we added the letter a at the end of hsl, which added the alpha channel where we set the transparency just like in RGB. This color is also the same as the RGB color above.