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?

Modestia

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

Clipboard

color property doesn't accept either percentages or length as values drafts.csswg.org/css-color-3/#colorunits – Ophiuchus

@Ophiuchus - Saturation and lightness are represented as percentages. 100% is full saturation, and 0% is a shade of gray. from the spec - w3.org/TR/css3-color/#hsl-color – Modestia

Although I have accepted it, I am curious to ask, what ambiguity would ZERO specifically pose? also, hsl/hsla doesn't have any other representation right? So when representing Saturation and Lightness, can't ZERO be actually used if there is no ambiguity? – Modestia

@PraveenPuglia true, but it's not a single value – Ophiuchus

@Ophiuchus - but zero is zero.. and it's treated in slightly different way. isn't it? Even for all length units, 0 doesn't have to have them. I have another thought coming up. – Modestia

and the other thought is... why do we even need to specify % for S & L part anyways? For the Hue part, although it's degrees, we specify it as integer value. So likewise can't it be done for S & L that they accept just integers and the parser knows for sure those are percentages because that's the only thing they expect according to spec? – Modestia

@PraveenPuglia it's up to the parser the way 0 is treated , and all the documentation mentioned are a recommendation to browser developers for conforming behavior - I'll make an example: try setting transform: rotate(90) on a random element – Ophiuchus

it requires deg to be specified as a must. so? – Modestia

@PraveenPuglia logically shouldn't it behave like hue ? – Ophiuchus

Ha ha! I believe hue should behave like this probably then :p I am all confused now. – Modestia

@Ophiuchus <color> values have their own microsyntax, which is defined in terms of other types of values, in the css-color spec. Specifically, in hsl()/hsla(), saturation and lightness are <percentage> values. – Clipboard

@PraveenPuglia Because in HSL, saturation and lightness are (conceptually) percentages. And yes, in this case there is no disambiguation issue, but a) Values need to be defined in a way that works anywhere, you can't have different parsing of percentages here and different there. b) Who knows how it will change in the future and whether it will accept new types in those params? – Clipboard

Regarding hue, yes, in CSS Color Level 4 it will be an angle as well. See: drafts.csswg.org/css-color-4 @Ophiuchus W3C specs are called "Recommendations" for historical reasons, but have no doubt: They are treated exactly like specifications by browser vendors. Please don't spread misinformation if you're uninformed about the standards process. – Clipboard

@LeaVero when I made the deg example I was refering to Praven's question why do we even need to specify % for S & L part anyways? – Ophiuchus

I think the problem here is considering Saturation and Lightness as values, the value here is hsl(0,0%,0%) as a whole, Sat. & Lig. are parameters inside the value and they must have a certain syntax. As I said in the beginning color property doesn't accept either percentages or length as values – Ophiuchus

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.

---

Your 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 ;)

Ophiuchus

I get that but what's really the caveat in not using the unit? Wouldn't that make it uniform in CSS? Also, from general sense, 0 should be unitless doesn't matter where it's used. – Modestia