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

【问题标题】：How exactly are HSL colours meant to be written?HSL 颜色到底是怎么写的？
【发布时间】：2015-06-15 12:24:28
【问题描述】：

我不清楚如何编写 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 颜色以两种方式编写，但真的不明白 - 这是正确的，您如何在两者之间进行转换？

干杯。

【问题讨论】：

h: 0.0 到 1.0 相当于 0.0° 到 360.0° 的角度。 s：0.0 到 1.0 相当于 0% - 100%，l：0.0 到 1.0 也对应于 0% 到 100%。如果您不熟悉它们，请查看 RGB、HSL 和 HSV 颜色空间的 3d 表示，这里：en.wikipedia.org/wiki/RGB_color_space，这里：en.wikipedia.org/wiki/HSL_and_HSV
@enhzflep 啊，太好了，这主要是我不确定的 h 值。 0-1 值等于 0-360 有点奇怪。干杯。

标签： javascript css colors w3c hsl

【解决方案1】：

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

HSL 颜色编码为三元组（色调、饱和度、亮度）。色调表示为色环的角度（即以圆圈表示的彩虹）。这个角度通常以度为单位，单位在 CSS 中是隐含的；从句法上讲，只给出了 a。 […] 饱和度和亮度以百分比表示。

tl;dr：

色调：无单位
饱和度：百分比
亮度：百分比

下一个版本，CSS Color Module Level 4（目前只是编辑草稿）specifies这个更好（而且看起来hue参数可以有更多的值）：

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

【讨论】：

【解决方案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 + '%)';
}

【讨论】：