<input type="color"> 默认值恒为"#000000"，非透明或系统色；value必须是合法7位或4位十六进制字符串，否则回退至黑色；移动端兼容性差，需降级处理；监听应使用input事件而非change。
不设 value 属性时，默认值就是 #000000，不是“系统色”也不是“透明”
很多开发者误以为不写 value 会让颜色选择器显示浏览器主题色、深色模式适配色，甚至留空或透明——实际上规范强制规定：未显式设置 value 时，<input type="color"> 的初始值永远是 "#000000"。这个值会直接体现在拾色器弹窗打开时被高亮的色块上，所有主流浏览器（Chrome、Firefox、Safari、Edge）行为一致。
这意味着：
• 即使页面背景是白色，控件也不会自动匹配为白色；
• value=""、value="transparent"、value="none" 都非法，等同于没设，结果仍是黑；
• 想默认为白色，必须写 value="#ffffff"，写 value="#fff" 在部分旧版 Safari 中可能失效。
value 必须是合法的 7 位或 4 位十六进制字符串，其他格式全被静默忽略
传入 rgb(255,100,50)、hsl(12, 80%, 60%)、"red" 或带 alpha 的 "#ff000080"，浏览器不会报错，但会直接丢弃并回退到 "#000000"。这是最常踩的坑——后端返回的颜色如果未经标准化（比如存的是 RGB 字符串），前端直接赋值就会“变黑”。
- ✅ 正确格式：
"#ff6b35"、"#f63"（注意：后者虽合法，但 iOS Safari 15.4 前不支持，建议统一用 7 位） - ❌ 错误格式：
"#ff6b3"（5 位）、"00aaff"（缺 #）、"#FF6B35"（大写没问题，浏览器会转小写，但不推荐依赖） - ⚠️ 动态赋值必须用
el.value = "#3a86ff"，不能用el.setAttribute('value', '#3a86ff')—— 后者不触发控件更新
移动端和 Safari 的兼容性陷阱特别多
iOS Safari 直到 15.4 才基础支持 type="color"，且存在两个硬限制：
立即学习“前端免费学习笔记（深入）”；
• 弹窗只提供有限色块，没有滑块或调色盘，无法精细调节；
• 若对控件加了 appearance: none 或覆盖 ::-webkit-color-swatch 样式，15.4+ 版本可能直接禁用拾色器功能，表现为点击无反应；
• Android Chrome 支持调色盘，但部分低端机型仍 fallback 到纯色块。
所以：
• 不要假设用户能选到任意 HSV 值；
• 如果产品必须支持 iOS 14 及更早版本，得用 JS 检测 input.type === 'color' 并降级为带正则校验的 <input type="text">；
• 真实项目中，品牌色固定可选时，往往自定义色板比原生控件更可控。
监听事件要用 input 而不是 change，尤其在 Safari 上
Safari 对 change 事件的支持不稳定：拖拽滑块时可能不触发，只有松手才触发；而 input 事件能实时捕获每次颜色变化（包括拖拽过程），更适合做预览或同步逻辑。
示例关键点：
• colorPicker.addEventListener('input', e => console.log(e.target.value)) 是安全做法；
• 不要在回调里反复 addEventListener，避免内存泄漏；
• 用户选完后得到的 value 永远是小写 7 位 hex（如 "#ff6b35"），别试图从中解析 alpha 或 HSL。
真正容易被忽略的是：这个控件根本不保存历史状态，也不暴露内部模型。你拿到的只是最终快照，所有中间过程、用户是否拖过滑块、是否手动输入过——全不可知。如果业务需要这些，就得自己封装一层记录逻辑。
