input type="color" 是最轻量但边界明确的原生颜色控件，值恒为小写#rrggbb格式、无透明度、不可定制UI、iOS Safari 15.4前不支持；格式错误或大小写不符会导致静默失效，需严格校验。
input type="color" 是最轻量的颜色选择器实现方式，但它不是“万能输入框”，而是一个有明确行为边界的原生控件——值恒为 #rrggbb 格式、不支持透明度、无法自定义色盘样式、iOS Safari 15.4 之前完全不可用。别把它当 canvas 或第三方库用，否则踩坑是必然的。
为什么改了 value 但色块没变？
手动赋值时格式错一个字符，浏览器就静默忽略：
-
input.value = "ff0000"❌ 缺#，无效 -
input.value = "#FF0000"❌ 大写十六进制，Chrome/Edge 可能渲染异常（色块不更新） -
input.value = "#ff0000"✅ 小写 + #，唯一安全写法 - 从 CSS 读取颜色（如
getComputedStyle(el).color）得到的是rgb(255, 0, 0)，必须先转成小写 hex 才能赋给input.value
监听颜色变化该用 input 还是 change？
两者触发时机不同，影响用户体验：
-
input：用户在调色盘中拖拽滑块、点击色环时实时触发，适合做预览 -
change：仅在用户关闭调色盘后触发（焦点离开），适合提交或存值 - 旧版 Android WebView 可能不触发
input，稳妥起见可同时绑定两个事件，或统一用change（牺牲实时性换兼容性）
怎么让颜色选完不立刻生效，而是点按钮才应用？
核心是解耦“选色”和“应用”两个动作，避免在 input 事件里直接操作 DOM：
立即学习“前端免费学习笔记（深入）”；
- 用
let selectedColor = '#000000'存值，确保两个事件处理器共享同一变量 -
input事件只负责更新selectedColor，不做任何样式修改 - 按钮
click回调中检查if (selectedColor)再赋值，防止空值导致样式异常 - 不要在按钮回调里重复
addEventListener，否则监听器会越绑越多
哪些场景下必须放弃原生 input type="color"？
一旦需求超出它的能力边界，硬撑只会增加维护成本：
- 需要 alpha 通道（
#rrggbbaa）→ 必须加input[type="range"]控制 opacity，或换库 - 要预设色板、历史记录、HSB 模式切换 → 原生控件不提供这些 API
- 设计系统要求统一圆角、禁用态、深色模式适配 → 它的内部结构不可样式化（
::-webkit-color-swatch已废弃，Safari/Firefox 不支持） - 需无障碍增强（如键盘导航、屏幕阅读器精准播报）→ 原生控件自带基础支持，但自定义方案得手动补
aria-label和tabindex
真正难的不是“怎么让它动起来”，而是判断什么时候该停手——原生 input type="color" 的边界非常清晰：它只负责把用户选的纯色，以标准 hex 形式交给你。其余所有事，都得你自己接住。
