CSS HSL 是如何工作的

CSS HSL 是一种定义颜色的 CSS 格式，它使用色相(hue)、饱和度(saturation)和亮度(lightness)三个参数来描述颜色。

HSL 值的语法

HSL 值的语法如下：

hsl(hue, saturation, lightness)

其中 hue 是 0 到 360 之间的角度值，表示色相；saturation 是 0% 到 100% 之间的值，表示饱和度；lightness 是 0% 到 100% 之间的值，表示亮度。

HSL 值的工作原理

HSL 颜色模型将颜色独立成三个属性 -- 色调、饱和度和亮度。这种方法使得开发人员可以更准确地调整颜色，同时保持可读性并避免出现视觉疲劳。

具体来说，HSL 值的工作原理如下：

• 色相 Hue：0~360度的一个角度值，表示颜色在色环上的位置。
• 饱和度 Saturation：0~100%的一个百分比值，表示颜色的饱和度。0%的饱和度表示灰度颜色，100%的饱和度表示全彩颜色。
• 亮度 Lightness：0~100%的一个百分比值，表示颜色的亮度。0%的亮度表示黑色，100%的亮度表示白色。

在 HSL 值中，我们可以主要通过色相、饱和度和亮度来调整颜色的外观。下面是一些例子：

hsl(60, 100%, 50%) /* 鲜艳的黄绿色 */
hsl(0, 0%, 0%) /* 纯黑色 */
hsl(0, 0%, 100%) /* 纯白色 */

HSL 和其他颜色格式的转换

HSL 值可以通过 CSS 函数来转换为其他颜色格式，例如 RGB、Hex 等。

HSL 转 RGB

HSL 值可以通过下面的公式来转换为 RGB 值：

let r, g, b;

if (saturation === 0) {
    r = g = b = lightness; // 根据 HSL 的值直接得出灰度值
} else {
    const hueToRgb = (p, q, t) => {
        if (t < 0) t += 1;
        if (t > 1) t -= 1;
        if (t < 1 / 6) return p + (q - p) * 6 * t;
        if (t < 1 / 2) return q;
        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
        return p;
    };

    const q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
    const p = 2 * lightness - q;
    r = hueToRgb(p, q, hue + 1 / 3);
    g = hueToRgb(p, q, hue);
    b = hueToRgb(p, q, hue - 1 / 3);
}

rgb(r * 255, g * 255, b * 255);

HSL 转 Hex

HSL 值也可以转换为 Hex 值。方法类似于 RGB 转 Hex。

const hslToHex = (hue, saturation, lightness) => {
    const rgb = hslToRgb(hue, saturation, lightness);
    return rgbToHex(rgb[0], rgb[1], rgb[2]);
};

结束语

本文介绍了 CSS HSL 颜色格式的语法、工作原理，以及与其他颜色格式的转换方法。掌握 HSL 颜色格式的使用，能够帮助开发人员更准确地制定颜色调色方案，提高视觉效果。