input type="color" 仅支持单色选择且返回固定格式#rrggbb，无法实现配色方案生成；需借助JavaScript（如chroma.js）转换HSL、计算互补/类似色、校验对比度并约束调色板用途。
input type="color" 不能直接做成配色工具，它只是单色选择器。真要做配色方案生成，得自己搭逻辑——颜色关系计算、对比度校验、语义化命名，这些原生控件一概不提供。
为什么不能只靠 input type="color"
它只管选一个值，返回固定格式的 #rrggbb 字符串，连相邻色、互补色、明度差都算不了。你点开系统拾色器，看到的是一堆滑块和色环，但浏览器不会把 HSL 坐标、可访问性对比度、WCAG AA/AAA 结果自动吐给你。更别说生成“主色+辅色+强调色+中性色”这种组合了。
- 值永远是 7 位小写十六进制，
rgba()或hsl()输入会被静默丢弃 - 不暴露色相（H）、饱和度（S）、亮度（L）分量，无法做色相偏移或饱和度衰减
- 移动端在华为 EMUI、小米 MIUI 等定制系统里常退化为纯文本框，用户甚至看不到拾色界面
-
change事件在安卓上可能触发多次，input事件才是可靠监听点
用 JavaScript 手动算配色关系
拿到一个基础色（比如用户从 input type="color" 选的 #3498db），下一步就得转成 HSL 模式才能做运算。别手写转换——用 chroma.js 或原生 getComputedStyle + document.createElement 配合临时 canvas 取值都比硬解 HEX 稳定。
- 互补色：H 加减 180°，S 和 L 保持不变（注意色相模 360）
- 类似色：H ±15°~30°，适合柔和过渡
- 三色组（Triadic）：H 分别加 0°、120°、240°
- 文字可读性校验：用
chroma.contrast()检查前景/背景对比度是否 ≥ 4.5（AA 级）
示例：用 chroma.js 快速生成邻近色
立即学习“前端免费学习笔记（深入）”；
const base = chroma('#3498db');
const analogous = [
base.set('hsl.h', (base.get('hsl.h') + 30) % 360),
base,
base.set('hsl.h', (base.get('hsl.h') - 30 + 360) % 360)
];避免把配色工具做成“多几个 color input”
常见错误是放 4–5 个 input type="color"，标上“主色”“辅助色”“文字色”，然后让用户自己瞎配。这根本不是配色工具，是配色填空题。真正有用的工具要带约束：
- 改主色时，辅色自动按固定算法更新（比如始终保持 S-10%、L+5%）
- 禁用明显违和的组合（如
#ff0000+#00ff00文字在背景上对比度仅 1.2） - 导出时不止给 HEX，还要附带 CSS 变量声明：
--primary: #3498db; --primary-contrast: #ffffff; - 支持从图片取色？那得用
canvas+getImageData()，input type="color"完全不参与
最易被忽略的一点：配色不是颜色越多越好。工具默认应限制调色板大小（比如最多 5 色），并强制标注每种颜色的用途（brand / text / background / border / state）。否则用户拖着滑块调出 20 个相近蓝，最后还是不知道哪个该用在哪。
