用 hsl() 定义品牌主色（如 hsl(218, 32%, 47%)）便于系统化调控饱和度与明度；color-mix() 可线性混合中性灰生成饱和度阶梯；oklch() 更精准调节明度且不损色感；所有变体应基于 CSS 变量实时计算，确保可维护性与可访问性。
用 hsl() 而不是 hex 定义品牌主色
直接写 #4A6FA5 看似简单，但后续想调出“稍浅一点的蓝”或“更稳重的灰蓝”，就得靠肉眼调、靠工具取色、靠反复试——根本没法系统化生成变体。换成 hsl(218, 32%, 47%) 就不同：色相（h）锚定品牌蓝，饱和度（s）和明度（l）变成可编程的轴。浏览器原生支持，无需预处理器或 JS 运行时。
注意：hsl() 的 s 和 l 是百分比值，不是 0–255 或 0–1；写成 hsl(218, 32, 47)（漏 %）会失效，CSS 解析为无效声明，回退到继承色或默认色。
用 color-mix() 按比例混合出饱和度阶梯
color-mix() 是目前最可控的变体生成方式，尤其适合“降低饱和度走向中性灰”的场景。比如从品牌色 hsl(218 32% 47%) 出发，混入 hsl(0 0% 50%)（即纯中性灰），就能线性衰减饱和感，同时保持色相稳定。
-
color-mix(in srgb, hsl(218 32% 47%) 70%, hsl(0 0% 50%) 30%)→ 偏主色，略降饱和 -
color-mix(in srgb, hsl(218 32% 47%) 40%, hsl(0 0% 50%) 60%)→ 中性化明显，适合禁用态或背景 - 别用
in lch混合——虽更符合人眼感知，但 Safari 当前不支持，in srgb兼容性更稳
用 oklch() + color() 函数做高保真明度调节
如果需要严格控制“同样饱和感下更亮/更暗”，hsl() 的明度轴会连带改变视觉饱和度（比如 l: 90% 的蓝看起来总像褪色）。此时应切到 oklch()：它的 L（亮度）和 C（色度）解耦更合理。
实操建议：
- 先用在线工具把主色转成
oklch(0.62 0.18 250)（示例值） - 固定
C（色度）和h（色相），只调L：如oklch(0.52 0.18 250)更暗，oklch(0.72 0.18 250)更亮 - 旧版浏览器不识别
oklch()，必须搭配 fallback：color: hsl(218 32% 47%); color: oklch(0.62 0.18 250);
避免在 :hover/:disabled 里硬编码多个色值
常见错误是写一堆独立类名：.btn--primary, .btn--primary-hover, .btn--primary-disabled，每个都填死一个十六进制值。一旦品牌色调整，要改七八处，且无法保证它们在视觉上真正构成“同一色系的梯度”。
正确做法是只定义一个 CSS 变量，然后在伪类里用函数实时计算：
button {
--brand: hsl(218 32% 47%);
background-color: var(--brand);
}
button:hover {
background-color: color-mix(in srgb, var(--brand) 85%, white 15%);
}
button:disabled {
background-color: color-mix(in srgb, var(--brand) 30%, hsl(0 0% 85%) 70%);
}
这样所有变体都源自同一源头，改 --brand 就全链路更新。唯一要注意的是，color-mix() 在 Firefox 111+、Chrome 111+、Safari 16.4+ 才完整支持；若需兼容更老版本，得用 @supports 回退到静态色值。
实际项目里，最常被忽略的是「明度与可访问性的隐性冲突」：比如用 color-mix(... 90%, white) 生成的浅蓝按钮，在深色模式下可能直接看不见——变体不能只考虑色彩逻辑，还得绑定配色模式上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
