CSS3 adds a new way to define colors for web pages: HSL or Hue Saturation and Lightness (some people say “Luminosity”). While many web designers may be reluctant to use this model, you may discover that it is somewhat easier to use because it is a model based on how we perceive colors. Most people think of colors first by their hue, or the color it most closely resembles, such as red, green or yellow. Then we think about how close to the pure color (say how red it is). This is the saturation. And finally we think about how close to white or black it is. This is the lightness.
In fact, once you understand the color wheel, it can be very easy to guess what a color is going to look like based on the HSL code. But unless you've memorized specific color codes in hexadecimal or RGB, most people have to look up what color those codes represent.
Many artists find the HSL model a lot easier to understand than other CSS color models because it describes the color in a similar way to how they describe colors on their palettes. A pure color has a vibrant hue and is fully saturated. Muddy colors are less saturated.
Defining HSL Colors in CSS
To define a color in HSL in your CSS, you define the three values in order:
hsl(hue, saturation%, lightness%);
Read the following pages to learn how to find the hue, saturation and lightness of your colors.