hsl比rgb更适合动态配色，因其将色相、饱和度、亮度解耦为正交维度，调整亮度（l）不扰动色相与饱和度，而rgb三通道联动易致偏色、发灰；主题换肤只需修改单一变量，实现精准可控的明暗切换与色环旋转。
主题换肤不是“换个颜色”，而是系统性地调整色相、饱和度、明度三者的耦合关系；HSL 把这三者拆成正交维度，RGB 却让它们绑死在三个通道里——所以换肤时用 hsl() 不是更“高级”，是唯一能避免颜色失控的方案。
为什么改 hsl() 的 l 值就能稳切暗色模式，而 rgb() 一调就发灰
因为 l（lightness）是独立控制明暗的维度，不扰动色相和饱和度。比如主色定义为 --primary: hsl(205, 90%, 50%)，暗色模式只需改成 hsl(205, 90%, 15%)，整个色系保持冷蓝调、高彩度，文字对比度也自然达标。
而用 rgb()：原始色 rgb(42, 110, 255) 想变暗，有人直接乘系数 rgb(21, 55, 127)，结果色相偏紫、饱和度暴跌；也有人减固定值 rgb(12, 80, 225)，又导致蓝通道过强、整体发青。根本原因是 R/G/B 任意一个通道变动，都会同时拖拽色相与饱和度。
- 暗色模式下，
l推荐区间是 10%–30%，卡在 5% 会趋近纯黑，色相信息丢失 - 别用
rgb()手动算“深一度”，浏览器不认你的直觉，只认通道数值 - Chrome DevTools 颜色拾取器点一下就能把设计稿里的
#2a6eff转成hsl(210, 90%, 50%)，比手动查表快得多
怎么用 hsl() 实现“一键换色调”，而不是重写所有变量
色相 h 是 0–360° 的环状值，改它等于旋转整个色环，所有衍生色自动对齐。比如设计系统中定义：--hue: 205，那么按钮、标签、边框全用 hsl(var(--hue), 90%, 50%)、hsl(var(--hue), 70%, 40%)、hsl(var(--hue), 20%, 85%) —— 换主题只要改一个 --hue 值。
RGB 完全做不到这点：想从蓝调切换到绿调，你得逐个替换 rgb(42, 110, 255)、rgb(60, 140, 255)、rgb(80, 170, 255)……而且新绿调是否协调？得开取色器试。
-
h值跨 60° 以上变化才明显可辨，小范围调试（±10°）几乎无感，适合微调 - 浏览器对
hsl(355deg, ...)→hsl(5deg, ...)自动走 +10° 弧线，不会绕 350° 大圈，动画也顺滑 - 别写
hsl(365, ...)，单位缺失（缺deg）在旧版 Safari 可能失效
饱和度 s 不是越高越好：它决定主题的“呼吸感”
饱和度 s 控制色彩纯度，但它和明度 l 是联动的——s 过高（>95%）且 l 在中间段（40%–60%）时，颜色刺眼；s 过低（
实际项目中，推荐把主色 s 锁在 70%–90%，辅助色用 50%–70%，背景/边框用 10%–30%。这样换肤时只调 h 和 l，s 层级结构不变，视觉秩序仍在。
- 暗色模式下，
s建议同步略降 5–10 个百分点，避免高饱和色在深底上“荧光化” -
hsl(180, 10%, 50%)和hsl(240, 10%, 50%)在多数屏上看起来几乎一样，别指望靠低s做区分 - 用 CSS
@property声明--primary-s类型为<percentage></percentage>，才能让s参与transition
真正难的不是写对 hsl()，而是把设计语言翻译成三个数字：哪个值该锁定、哪个该暴露、哪个该随上下文浮动。一旦拆开，换肤就只是改几个变量；没拆开，每次换色都是救火。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
