三角色方案是在色相环上等距120°选取三色的配色方法，hsl中通过±120°色相偏移最可靠，因仅hsl支持原生色相几何运算且自动模360，rgb/hex无法保证同源性与可预测性。
什么是三角色方案，为什么用HSL色相±120°最可靠
三角色（Triadic）配色是指在色相环上等距分布的三个颜色，彼此间隔120°，视觉平衡、对比鲜明又不冲突。用 HSL 实现它，核心就是固定饱和度 s 和亮度 l，只对色相 h 做 ±120° 偏移——这是唯一能保证三色“同源、同质、可预测”的方式。RGB 或 HEX 无法直接做这种几何运算，硬凑三色容易发灰或跳色。
- 主色
hsl(210, 85%, 60%)（偏蓝）→ 三色组自动为hsl(330, 85%, 60%)（洋红）、hsl(90, 85%, 60%)（青绿） - 必须用
hsl(from var(--base) calc(h + 120) s l)，而不是hsl(calc(var(--h) + 120), s, l)：后者在 Safari ≤15.4、Firefox ≤114 中静默失效 - 色相加减会自动模 360：350° + 120° = 470° → 自动转为 110°，无需手写
% 360
如何用 CSS 变量安全声明三角色变量体系
不能只存一个 --color-primary: #2563eb 就完事。必须把 H/S/L 拆成独立变量，否则后续所有 calc() 都不可控。现代浏览器支持 hsl(from ...)，但旧版 fallback 必须提前收口。
- 基础定义：
--hue-primary: 210;、--sat-primary: 85%;、--lum-primary: 60%;（注意：h 是纯数字，s/l 带 %） - 三色声明（Chrome 111+/Safari 16.4+/Firefox 115+）：
--color-primary: hsl(var(--hue-primary), var(--sat-primary), var(--lum-primary));--color-secondary: hsl(from var(--color-primary) calc(h + 120) s l);--color-tertiary: hsl(from var(--color-primary) calc(h - 120) s l); - 兼容性 fallback（必须显式写死）：
--color-secondary: #f97316;、--color-tertiary: #10b981;，并用@supports not (color: hsl(from red h s l))包裹
常见翻车点：色相跨零、明度溢出、饱和度失真
三角色不是“算出来就行”，人眼感知和渲染边界常被忽略。比如主色是暗灰蓝 hsl(210, 15%, 20%)，直接套公式生成的三色仍是低饱和+低明度，结果三块灰根本分不出层次。
- 色相跨零没问题：CSS 自动处理 350° → 10° 的短弧过渡，但 JS 计算时需归一化（
(h + 120 + 360) % 360） - 明度
l溢出风险高：主色l: 10%时，calc(l + 20%)得 30%，尚可；但若l: 90%，再加就泛白。建议对三色统一限定l: clamp(25%, var(--lum-primary), 85%) - 饱和度
s太低会导致三色趋同：若主色s: 10%，三色全是不同灰度的灰。应设下限：calc(max(25%, var(--sat-primary)))
要不要用 oklch() 替代 HSL 做三角色？
不用。oklch() 的 L（亮度）和 C（色度）虽更符合人眼感知，但它不支持 from 语法中的色相偏移操作，也没有 calc(h + 120) 这类语义化色相运算。目前所有浏览器都不支持 oklch(from ... calc(L + 0.1) C h)。三角色本质是色相几何关系，HSL 的 h 是唯一原生支持该模型的参数。
- oklch() 适合做深色模式渐变、数据可视化色阶，不适合三角色这类离散色相定位
- 强行转换：用 PostCSS 插件把 HSL 三色转成 oklch() 值可以，但失去动态性，等于放弃 CSS 原生计算能力
- 真正要升级，应等未来
color-mix(in oklch, ...)支持色相旋转——目前无规范草案
复杂点不在“怎么算”，而在“算完怎么用”。三角色生成后，必须配合语义层变量（如 --color-accent-1）和场景层变量（如 --color-bg-accent）解耦，否则换主题时还得重算三色——那不如一开始就不拆 H/S/L。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
