0

编码结果

HSL 颜色

关于 HSL 颜色

HSL 颜色是使用色相、饱和度和明度来表示颜色的颜色模型。它不像 RGB 那样直接指定红、绿、蓝光的强度，而是将色味、鲜艳程度和明亮程度分开，因此常用于颜色调整和 CSS 设计。

成分含义示例值
H: 色相以角度表示色味。红色约为 0deg，绿色约为 120deg，蓝色约为 240deg。90deg
S: 饱和度表示颜色的鲜艳程度。0% 为无彩色，100% 为最鲜艳的颜色。50%
L: 明度表示颜色的明亮程度。0% 为黑色，50% 为标准明度，100% 为白色。50%

例如，红色等主要颜色可以表示如下。

颜色HSL 表示RGB 表示
红色hsl(0deg 100% 50%)rgb(255 0 0)
绿色hsl(120deg 100% 25.1%)rgb(0 128 0)
亮绿色hsl(120deg 100% 50%)rgb(0 255 0)
蓝色hsl(240deg 100% 50%)rgb(0 0 255)
白色hsl(0deg 0% 100%)rgb(255 255 255)
黑色hsl(0deg 0% 0%)rgb(0 0 0)

要包含透明度，请添加 Alpha 值。例如，半透明红色可以表示为 hsl(0deg 100% 50% / 0.5)。

输入时，可以使用 hsl(0deg 100% 50%) 这样的空格分隔表示，也可以使用 hsl(0deg, 100%, 50%) 这样的传统逗号分隔表示。

色相、饱和度、明度的处理

色相按角度处理，超过 360deg 的值或负值会标准化到 0deg 到 360deg 的范围。例如，hsl(360deg 100% 50%) 会作为与 hsl(0deg 100% 50%) 相同的颜色处理，hsl(-120deg 100% 50%) 会作为与 hsl(240deg 100% 50%) 相同的颜色处理。

饱和度和明度按 0% 到 100% 的范围处理。饱和度为 0% 时，无论色相如何，颜色都会变成灰色系的无彩色。明度为 0% 时为黑色，100% 时为白色。

HSL 和 RGB 的区别

RGB 直接指定红、绿、蓝成分，因此更接近屏幕显示和图像数据。HSL 将色相、饱和度和明度分开，因此更容易进行“保持相同色相并变亮”或“只降低饱和度”等调整。

不过，HSL 并不是在人类知觉上完全均匀的色彩空间。若要更容易处理视觉明亮度或色差，可以使用 Lab、LCH、Oklab、Oklch 等色彩空间。