深色模式必须用hsl()而非hex，因hex是绝对值无语义，无法动态调整明暗；hsl()固定色相与饱和度、仅调亮度即可保证色系统一且符合wcag对比度要求。
深色模式必须改用 hsl()，HEX 在这里不是“能用”，而是“会埋坑”。
为什么 HEX 在深色模式下会失控
HEX 是绝对值，没有语义。写 #121212 看似是深灰，但它和你的主色 #4a90e2 之间没有任何数学或视觉关联。一旦设计系统要批量生成悬停、禁用、边框、文字等衍生色，就得靠人眼比对或工具硬算——主色一调，整套颜色全得重来。
- HEX 无法在 CSS 中做任何计算：
calc(#4a90e2 - 20%)不合法，浏览器直接忽略 - 深色模式常需“同色相变暗”，
#4a90e2 → #121212实际色相已偏移（蓝变紫灰），肉眼难察觉但 WCAG 对比度校验会崩 - 设计师说“背景再深一点”，你没法直觉响应；而
hsl(210,70%,12%) → hsl(210,70%,8%)就是明确的“更暗”
hsl() 在深色模式里的不可替代动作
关键不是“hsl 更高级”，而是它让明暗调整变成声明式操作：固定 h 和 s，只动 l（lightness）就能保证色系统一。
- 浅色模式按钮背景：
hsl(210,70%,60%) - 深色模式对应背景：
hsl(210,70%,12%)—— 仅改一个参数，色相锚定，不发灰 - 文字色同步提亮：
hsl(210,70%,92%)，确保对比度 ≥ 4.5:1 - 禁用态只需降饱和度：
hsl(210,30%,75%)，不用另取新 HEX
实际项目中怎么安全落地 hsl()
别从设计稿里手动转 HSL 值——多数工具输出不准。直接用 Chrome DevTools 点击颜色预览块，右键循环切到 hsl() 格式，拿到真实渲染值后再微调。
- CSS 变量拆解更稳：
--primary-h: 210、--primary-s: 70%、--primary-l: 60%，后续所有变体都复用这些基础值 - 媒体查询里只覆盖
l：@media (prefers-color-scheme: dark) { :root { --primary-l: 12%; --text-l: 92%; } } - 注意兼容细节：
hsl(210,70%,60%)逗号后不能有空格（旧版 Safari 会解析失败） - 避免在
hsl()里用calc()动态算亮度，如hsl(210,70%,calc(60% - 48%))—— 浏览器不支持，得提前算好写死
真正难的不是选 hsl()，而是守住 h 和 s 不乱动。深色模式下改色相或饱和度，八成会导致按钮发紫、文字发灰、对比度跌破 WCAG 下限——这些坑，HEX 没法帮你绕，但 hsl() 至少给了你不动它们的明确理由。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
