品牌色必须用hsl格式定义并拆解为css变量，通过calc()动态生成变体和互补色，配合color-mix()控制灰度，同时做好旧浏览器fallback。
直接用 hsl() 定义品牌色系，比 HEX/RGB 更可控、更易维护——关键不是“能不能”，而是“怎么锚定、怎么推演、怎么兜底”。
品牌主色必须用 HSL 格式定义，且 H/S/L 单位不能错
HSL 不是可选写法，是体系起点。把品牌蓝写成 #4A6FA5 看似省事，但后续所有变体（浅色版、禁用态、深色模式）都得靠人眼调、靠工具取、靠试错堆，根本没法系统化。
-
hsl(213, 38%, 47%)是有效值；hsl(213, 38, 47)（漏 %）会静默失效，浏览器回退到继承色或透明 - 色相
h必须是 0–360 的无单位数字或带deg单位（如213deg），但混用单位（如213deg + 180）在calc()中会导致类型不匹配 - 饱和度
s和亮度l必须带%—— 这是 CSS 解析硬性要求，不是风格偏好
用 CSS 变量拆解 H/S/L，再用 calc() 动态生成变体
不要在 :root 里写死 hsl(213, 38%, 47%)，而要把三要素抽成独立变量，才能真正实现“改一处，全链路响应”。
- 基础声明：
--primary-h: 213;、--primary-s: 38%;、--primary-l: 47%; - 按钮悬停变亮：
background-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 12%)); - 禁用态降饱和+降亮：
color: hsl(var(--primary-h), calc(var(--primary-s) * 0.4), calc(var(--primary-l) - 15%)); - 注意：Chrome 111+、Firefox 115+、Safari 16.4+ 支持
hsl()内嵌calc()，旧版 Safari（≤15.6）会直接忽略整条声明
互补色必须用 hsl(from var(--color) calc(h + 180) s l)，别手算
想让品牌色自动配出互补色（比如蓝配橙），别自己算 213 + 180 = 393 → 393 % 360 = 33，然后写 hsl(33, 38%, 47%)——这种静态写法一换主色就得重算，且无法应对运行时主题切换。
- 正确写法：
--primary-complement: hsl(from var(--primary) calc(h + 180) s l); - 前提：确保
--primary是 HSL 格式（如hsl(213, 38%, 47%)），HEX 或 RGB 值会让from提取失败 - 兼容性兜底必须做：
color: hsl(213, 38%, 47%); color: hsl(from var(--primary) calc(h + 180) s l);，旧浏览器会忽略第二行，按第一行 fallback 渲染 - 这个语法在 Chrome 111+、Safari 16.4+、Firefox 115+ 已稳定支持，但低于这些版本的环境（如企业内网旧 Chrome 100）需靠 PostCSS 插件展开
多级变体优先用 color-mix() 混合中性灰，而不是瞎调 L
只靠调 l 值生成浅色背景或禁用态，容易发灰或失色——尤其高饱和色在 l > 85% 时视觉上已接近白，失去辨识度。
- 推荐路径：
color-mix(in srgb, var(--primary) 70%, hsl(0 0% 50%) 30%)→ 保留主色感，温和降低饱和度 - 禁用态可用更高灰度比例：
color-mix(in srgb, var(--primary) 30%, hsl(0 0% 50%) 70%) - 别用
in lch—— 虽理论更准，但 Safari 当前不支持，in srgb兼容性稳得多 - 如果需要严格控明度（比如文字对比度达标），再切到
oklch()，但必须配hsl()fallback，因为旧浏览器完全不识别oklch
最常被忽略的一点：所有变量必须声明在 :root，且互补色、变体色要紧挨着主色声明——作用域断裂（比如在某个组件里重定义 --primary）会导致 from 提取不到原始值，整个链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
