1 The color value (hue), which is represented by a color wheel. Ranges from 0 to 360 which both times is red. 120 is green, 240 is blue – so yellow is at 60, cyan at 180 and magenta at 300.
2 The saturation of the color. Ranges from 0% to 100% where 0% is the fully desaturated color thus 50% grey. 100% represents the fully saturated color.
3 The lightness of the color. Also ranges from 0% to 100%. Only 50% represents the “real” color value set at 1. More than 50% is a lighter tint, less is a darker tint. So in contrast to Photoshop 100% is not the “real” color value but pure white. 0% is black here and there however. The given example would be 100% in Photoshop.
4 The alpha value. 0 stands for fully transparent and 1 for opaque (solid). The zero before the comma can be omitted.
x The live view can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.