0 as saturation and lightness doesn't work but 0% does in hsl/hsla?

Question

I was trying a simple demo where I gave colors to elements in hsl. From all my experience I know that 0(ZERO) in CSS is unitless. If you want to specify 0 as a value, you may leave the unit.

This however doesn't seem to be the case with hsl/hsla. On both Chrome and Firefox, it results in invalid property value.

A tangentially related question was this but that contains the answer that zero should be unitless referring to spec.

Any bug with hsla(0, 0%, 0%, 0), becoming hsla(0, 0, 0, 0)? (missing percent sign)

hsl(0,0,0)     // error
hsl(0,0%,0)    // error
hsl(0,0,0%)    // error

Is it specifically designed to work with units beside zero? Are there any other properties like this where having a unit beside zero is a must?

Answer 1

A 0 <length> in CSS is unitless, not any 0, otherwise disambiguation would not be possible (e.g. in shorthands). This is a <percentage>, not a <length>.

Specification:

• http://www.w3.org/TR/css-values/#percentages
• http://www.w3.org/TR/css-values/#lengths

Answer 2

in general hsl is a concept for defining a color apart from CSS;

the three paramaters you can set are Hue Saturation Lightness:

• Hue Think of a color wheel. Setting a value is like setting an angle degree.
  As HSL-CSS-value it's a unitless value ; positive an negative are supprted (ie. 360 == -720).

• Saturation - 0% is completely denatured (grayscale). 100% is fully saturated (full color).
  As HSL-CSS-value a percentage value is needed (you can specify any % value but it's range is 0% through 100%).

• Lightness - 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
  As HSL-CSS-value you have the same rule as saturation.

• the optional alpha-value is a value form 0 to 1 that defines the opacity of color .

here's a link to a good article for additional info.

---

EDIT:

You're assumption that the color property can be set to a length-% unit value is wrong - like other CSS properties that accept only a certain range of values color property has it's own options ( hsl is one); when the parser gets to an hsl or hsla value the rules are the one above (probably in the future the parser will fix it for you but for now this is how it works ;)