用 <input type="color"> 最快实现
现代浏览器原生支持颜色选择器，<input type="color"> 是最轻量、兼容性足够（chrome 20+、firefox 27+、safari 12.1+、edge 79+）的方案。它不依赖 js，也不需要第三方库，点开就是系统级调色盘。
常见错误是手动绑定 change 事件却忽略 input 事件——用户拖拽滑块时，change 只在失焦后触发，而 input 实时响应更符合交互直觉。
-
<input type="color" value="#ff6b35">：默认值必须是 7 位十六进制格式（#rrggbb），写成rgb(255,107,53)或red会回退为#000000 - 移动端 Safari 对
type="color"支持较晚（ios 12.2+），旧版本会降级为文本框，建议加placeholder提示用户手动输入 - 不能通过 CSS 自定义调色盘样式，但可用
::-webkit-color-swatch微调预览小方块（仅 Chromium 系）
监听颜色变化时该用 input 还是 change？
取决于你是否需要实时反馈。比如做颜色预览、渐变生成或表单校验，input 更合适；如果只是提交前取值，change 足够且更省资源。
典型错误是只监听 change 却以为能捕获每次拖拽——实际用户在调色盘中拖动滑块时，事件根本不会触发，直到点击“确定”或失焦。
立即学习“前端免费学习笔记（深入）”；
- 监听
input：el.addEventListener('input', e => console.log(e.target.value))，每次颜色变动立即执行 - 监听
change：el.addEventListener('change', e => saveColor(e.target.value))，适合保存动作 - 注意：IE 完全不支持
type="color"，连事件都不会绑定，需提前检测document.createElement('input').type = 'color'是否仍为'color'
value 值格式不对会导致默认色变黑
<input type="color"> 对 value 的格式极其敏感。只要不是标准 7 位十六进制（如 #a3c4dc），就会静默回退到 #000000，页面上看起来就像“没生效”。
容易踩的坑包括：传入带 alpha 的 rgba()、CSS 变量（var(--primary)）、命名色（blue）、缩写的 4 位 hex（#abc）或空字符串。
- 服务端返回颜色值时，务必统一转成大写或小写的 7 位 hex，例如用
color.replace(/^#?([a-fd])([a-fd])([a-fd])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`)补全缩写 - 从
localStorage读取时，检查是否为有效 hex 字符串，否则 fallback 到默认值，避免渲染出意外的黑色 - Vue/React 中绑定
v-model或value属性时，确保初始值非空且格式正确，否则组件首次渲染就失败
想自定义调色盘就得放弃原生 type="color"
如果你需要 HSV 滑块、透明度控制、历史色板、取色器（eyedropper）或主题色分类，原生 <input type="color"> 无法满足——它只提供 RGB + 六边形色环，且不可扩展。
这时得用 JS 库（如 vanilla-picker、chroma.js 配合 canvas）或封装一个自定义组件。但要注意：自定义方案必然增加 bundle 体积、引入兼容性判断，并丢失系统级无障碍支持（如屏幕阅读器对原生控件的识别）。
- 不要为了“看起来更酷”强行替换原生控件，先确认真实需求是否超出
type="color"能力边界 - 若必须自定义，优先用轻量库（
），避免把整个 <code>tinycolor2+ ui 框架一起打包进来 - 移动端真机测试必不可少——很多 canvas 实现的色盘在 iOS Safari 上触控响应迟钝或坐标偏移
颜色选择器表面简单，但 value 格式、事件时机、降级逻辑和移动端表现，每个点都容易漏掉一两个细节。尤其当它嵌在表单深处、配合 dark mode 切换或国际化时，问题才真正浮现。