When using colors on web pages, most of us have used either color names/RGB codes, or the hexadecimal codes. For a review of these color management systems, please see this tutorial.
However, now, using CSS style tags in the Head of a webpage, we can set different colors (hues) and even different Saturations (intensity) and Lightness for each of these hues.
For instance, the background color for this paragraph is green with 100% Saturation and 50% Lightness. We can also add an alpha channel to this style tag in the Head for transparency/opacity effects.
So here is the same background color as in the above paragraph, with the transparency/opacity alpha channel added.
To learn how to do this, please consult the following tutorials in this specific order, as the second part builds on the first and so on:
Part 1 (HSL Colors)
Part 2 (HSLA Colors)
Part 3 (RGB plus A Colors)
Part 4 (Hexadecimal Colors)
Part 5 (Coloring Table Cells with RGBA)
Part 6 (Border-Collapse: Separate)