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定义了必须在color属性中指定HSL color values的方式：

HSL颜色编码为三重（色调，饱和度，亮度）。色调表示为色环的角度（即，以圆圈表示的彩虹）。这个角度通常以度为单位来度量，单位隐含在CSS中;在语法上，只给出一个。 [...]饱和度和亮度表示为百分比。

<强> TL;博士：

hue：unitless
饱和度：百分比
亮度：百分比

下一个版本， CSS Color Module Level 4 （目前只是编辑草案）specifies这个更好（似乎hue参数可以有更多值）：< / p>

HSL颜色指定为色调，饱和度和亮度的三重色。 hsl()函数的语法是：
hsl() = hsl( <hue>, <percentage>, <percentage> )  
hsla() = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<hue> = <number> | <angle> | <named-hue>

Answer 2

对于CSS色调值必须介于0到360度之间，饱和度和亮度必须介于0到100％之间，alpha通道必须介于0和1之间。您可以使用正则表达式来解析字符串CSS颜色并获取数值：

function parseHsl(color) {
    var hslRegexp = /^\s*hsl\s*\(\s*(\d{1,3}\.?\d?)\s*,\s*(\d{1,3}\.?\d*)%\s*,\s*(\d{1,3}\.?\d*)%\s*\)\s*$/
    var match = color.match(hslRegexp);
    if (!match) {
        throw new Error('Not an HSL color.');
    }
    var h = +match[1];
    var s = +match[2];
    var l = +match[3];
    if (isNaN(h) || isNaN(s) || isNaN(l)) {
        throw new Error('Not a number.');
    }
    h = h / 360;
    s = s / 100;
    l = l / 100;
    if (h < 0 || h > 1 || s < 0 || s > 1 || l < 0 || l > 1) {
        throw new Error('Out of range.');
    }
    return {
        h: h,
        s: s,
        l: l
    };
}

function getCssHslColor(hsl) {
    return 'hsl(' + hsl.h * 360 + ',' + hsl.s * 100 + '%,' + hsl.l * 100 + '%)';
}

HSL的颜色到底是怎么写的？

2 个答案: