javascript - HSL 颜色到底应该怎么写？

Question

我不清楚 HSL 颜色的书写方式。 W3 有这样的:

color: hsl(120, 100%, 50%);

而 ThreeJs 是这样要求它们的:

h — hue value between 0.0 and 1.0 
s — saturation value between 0.0 and 1.0 
l — lightness value between 0.0 and 1.0

我在网络上看到过两种方式编写的 HSL 颜色，但真的不明白 - 这是正确的，如何在两者之间进行转换？

干杯。

Answer 1

对于 CSS，W3C Recommendation CSS Color Module Level 3定义如何 HSL color values必须在 color 属性中指定:

HSL colors are encoding as a triple (hue, saturation, lightness). Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a is given. […] Saturation and lightness are represented as percentages.

tl;dr:

1. 色调:无单位
2. 饱和度:百分比
3. 亮度:百分比

下一个版本，CSS Color Module Level 4(目前只是编辑草案)specifies这样更好(并且 hue 参数似乎可以有更多的值):

HSL colors are specified as a triplet of hue, saturation, and lightness. The syntax of the hsl() function is:

hsl() = hsl( <hue>, <percentage>, <percentage> )  
hsla() = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<hue> = <number> | <angle> | <named-hue>