HSL
HSL 是一种圆柱形的颜色表示模型，用色相（Hue）、饱和度（Saturation）、亮度（Lightness）三个维度来描述颜色，是 RGB 之外最常见的表示方式之一。它的三个分量含义直观：色相是色环上的角度，取值 0–360 度（0/360 红、120 绿、240 蓝）；饱和度是百分比 0%–100%，从灰到鲜艳；亮度也是百分比，0% 为黑、100% 为白、50% 才是最纯的该色相。
它的主要价值是「符合人的直觉」：想让颜色更淡就调亮度，想让它更灰就降饱和度，想换个颜色只动色相，比直接改 RGB 三个通道好推理得多。CSS 原生支持，写法为 hsl(210, 50%, 40%)，现代语法用空格分隔并可带透明度：hsl(210 50% 40% / 0.5)。
使用中有两个常见误区：
- 别把 HSL 和 HSV/HSB 混为一谈——两者数学不同。HSL 里亮度 100% 一定是白色、50% 是纯色；HSV 里明度 100% 是最鲜艳的纯色，并不产生白色。
- HSL 不是感知均匀的：亮度值相同的黄色和蓝色，看起来黄的明显更亮。若需要跨色相保持一致的视觉明暗，改用
OKLCH/LCH更合适。
常见问题
HSL 和 HSV（HSB）是一回事吗？
不是。两者色相相同，但第三个分量的数学定义不同：HSL 的亮度 50% 是纯色、100% 是白色；HSV 的明度 100% 就是最鲜艳的纯色，全饱和时不会变白。转换公式也不通用，别互相套用数值。
为什么两个 HSL 亮度都是 50% 的颜色，看起来亮暗差很多？
因为 HSL 不是感知均匀的，它按几何方式算亮度，没有考虑人眼对不同波长的敏感度差异（黄绿看着就是比蓝紫亮）。要让同一亮度值在各色相下视觉一致，用 OKLCH 或 LCH。
CSS 里怎么给 HSL 加透明度？
用现代空格语法加斜杠：hsl(210 50% 40% / 0.5)，斜杠后是 alpha（0–1 或百分比）。旧写法则用 hsla(210, 50%, 40%, 0.5)，二者等价。