辅助色必须绑定主色生成，不可手动挑选或用原生color输入框；应使用chroma.js按hsl规则生成邻近色、互补色、中性色，并以用途+关系命名css变量，同时校验对比度、明度差（≥0.2）及色弱适配。
辅助色不能靠“看着顺眼”手动挑，必须绑定主色生成，否则容易破坏对比度、语义层级或无障碍合规性。
为什么不能直接用多个 <input type="color"> 让用户自己选辅助色
原生 <input type="color"> 只返回一个 #rrggbb 值，不提供色相（H）、饱和度（S）、明度（L）分量，也没法自动校验和主色的对比度或色彩关系。常见翻车点包括：
- 用户选的“辅助色”和主色在色相环上离得太远，视觉割裂
- 两个颜色明度接近（比如
#4a6fa5和#5d7ea8），文字叠在上面达不到 WCAG AA 级对比度（≥ 4.5） - 移动端部分系统（如 MIUI、EMUI）会把该控件降级为纯文本框，用户甚至看不到拾色器
- 没有约束逻辑：改了主色，辅助色还停留在旧值，整套配色瞬间失效
用 chroma.js 自动生成语义化辅助色（推荐做法）
chroma.js 能把基础色转成 HSL，再按规则偏移色相、调整饱和度或明度，输出可读、可用、可访问的辅助色。关键不是“好看”，而是“可靠”。
例如，从主色生成三类常用辅助色：
- 邻近色（Analogous）：色相 ±20°，保持 S/L 不变 → 适合柔和过渡区域
- 互补色（Complementary）：色相 +180°，常需调低饱和度避免刺眼 → 适合强调按钮或警告状态
- 中性色（Neutral）：取主色的 L 值，设 S=0%，再微调 L（±15%）→ 用于背景或边框，不抢主色风头
代码片段示例：
const base = chroma('#3a0ca3');
const analogous = [
base.set('hsl.h', (base.get('hsl.h') + 20) % 360),
base,
base.set('hsl.h', (base.get('hsl.h') - 20 + 360) % 360)
];
const neutralBg = base.set('hsl.s', 0).set('hsl.l', base.get('hsl.l') - 0.15);
辅助色命名与 CSS 变量落地要带上下文
别直接叫 --secondary 或 --accent —— 这些名太泛，团队协作时容易误用。建议按用途+关系命名，比如：
-
--primary：原始主色（用户选定或品牌色） -
--primary-analog-1/--primary-analog-2：邻近色，用于卡片悬停、图标描边等弱提示 -
--primary-neutral-bg：中性背景色，专用于background-color -
--primary-contrast-text：确保和--primary对比度 ≥ 4.5 的文字色（chroma.contrast() 校验过）
所有变量统一塞进 :root，并在 JS 生成后动态写入 <style></style> 标签，避免硬编码覆盖已有变量。
最容易被忽略的细节：明度断层与色弱适配
人眼对明度变化比色相更敏感。即使两个辅助色色相差 120°，如果明度差＜10%，在灰度模式下就完全分不清。务必用 chroma.luminance() 检查：主色和辅助色 luminance 差最好 ≥ 0.2。另外，避免仅靠色相区分信息（比如“成功绿” vs “错误红”），要叠加图标或文字标签——这是色觉障碍用户的刚性需求，不是锦上添花。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
