sRGB、HSL、Lab 与 OKLCH 各管什么：色导网课堂梳理

先分清两类问题

第一类问题是「这是什么颜色」。要回答它，必须有一个和设备无关的参照：三个原色的位置、白点、以及数值到亮度的转换曲线。sRGB 就是这样一组约定，所以同一串十六进制在不同屏幕上才大致指同一个颜色。

第二类问题是「这两个颜色差多少」「把亮度调高一点」。这类问题要的是空间里的距离和方向有意义。sRGB 在这方面很差：数值上等距的两步，看起来可能一步明显一步几乎没变。

大部分配色上的困惑，都是用第一类的数字去回答第二类的问题。

HSV 与 HSL 的区别只在第三个分量：HSV 的 V 是最亮通道，HSL 的 L 是最亮与最暗通道的平均。
空间	它回答的问题	可以用来	不要用来
sRGB / HEX	这是什么颜色	交付、存储、写进代码	算色差、排亮度
HSL / HSV	手上怎么调	滑块微调、按色相取同族色	当亮度用、做渐变插值
CIELAB	差多少	算色差、判断两色是否可分	手调（a、b 不直观）
OKLCH	沿亮度或色相走一步	排色阶、做插值、统一亮度	当作交付格式（兼容性要兜底）

HSL 是双锥：L 趋向 0 或 100 时能表示的饱和色急剧收缩。HSV 是圆柱，顶面是满亮度的整个色相环。

因为是双锥，L 90% 的位置几乎放不下饱和色——你把滑块往上推，饱和度会被迫让位。这也是为什么「把品牌色调浅一点当背景」常常得到一个发灰的颜色。

更关键的是，L 只是两个通道的算术平均，和眼睛感受的亮度关系很弱。下一篇用实测数字说明这件事。

CIE xy 色度图上的 sRGB 与 Display P3 三角形。灰色外廓只是示意，三角形顶点用的是两个标准各自公布的原色色度坐标。

三角形越大，能表示的颜色越多。sRGB 是网页的默认假设，Display P3 的绿与红更远，所以同样一串数值在 P3 语境下代表的是另一个（更饱和的）颜色。这就是同一张图在不同设备上「偏艳」或「发灰」的一个常见原因。

实际工作里的安全做法是：素材与代码统一按 sRGB 处理，需要广色域时显式标注配置文件，不要让两种假设混在一个项目里。