The ways you can define colors have been greatly expanded with CSS3: you can now also use CSS functions to apply colors in the common formats RGB (red, green, and blue), RGBA (red, green, blue, and alpha), HSL (hue, saturation, and luminance), and HSLA (hue, saturation, luminance, and alpha). The alpha value specifies a color’s transparency, which allows elements underneath to show through.
To define a color with the
function, you must first choose a value for the hue between 0 and 359
from a color wheel. Any higher color numbers simply wrap around to the
beginning again, so the value of 0 is red, and so are the values 360 and
In a color wheel, the primary colors of red, green, and blue are separated by 120 degrees, so that pure red is 0, green is 120, and blue is 240. The numbers between these values represent shades comprising different proportions of the primary colors on either side.
Next you need the saturation level, which is a value between 0 and 100 percent. This specifies how washed out or vibrant a color will appear. The saturation values commence in the center of the wheel with a mid-gray color (a saturation of 0 percent) and then become more and more vivid as they progress toward the outer edge (a saturation of 100 percent).
All that’s left then is for you to decide how bright you want the color to be, by choosing a luminance value of between 0 and 100 percent. A value of 50% for the luminance gives the fullest, brightest color, and ...