必须显式设置value属性，否则chrome/firefox默认显示黑色色块（#000000），safari可能空白；值须为合法7位或4位十六进制（如#f00），非标准格式会被静默忽略并重置为#000000。
必须显式设置 value 属性，否则色块可能不显示或回退为黑色
不写 value，Chrome/Firefox 默认渲染为黑色色块（"#000000"），Safari 可能直接空白；哪怕你只想要白色，也得写 value="#ffffff"。值必须是合法 7 位或 4 位十六进制格式（如 "#f00" 或 "#ff0000"），写 value="red"、value="rgb(255,0,0)" 或 value="ff0000"（缺 #）都会被浏览器静默忽略，并重置为 "#000000"。
监听颜色变化要用 input 事件，不是 change
input 事件在用户拖拽调色盘滑块、点击色块时实时触发，适合做预览；change 只在焦点离开或确认选择后才触发一次，无法响应中间状态。但要注意：旧版 Android WebView（如 Crosswalk 内核）不支持 input，只认 change。稳妥做法是：
- 优先绑定
input，再 fallback 绑定change - 或统一用
change，接受实时性损失 - 避免在回调里重复
addEventListener，否则造成多次执行
获取到的 value 永远是小写 7 位十六进制，别拿它直接比对
无论你初始化用的是 "#FF6B35" 还是 "#f6b"，读取 picker.value 总是返回类似 "#ff6b35" 的格式——小写、7 位、带 #。这意味着：
- 不能用
=== "#FF6B35"判断，得先.toLowerCase()或用正则校验 - 从 CSS 读取的颜色（如
getComputedStyle(el).backgroundColor）通常是rgb(255, 107, 53)，要转成 hex 才能赋给input.value - 服务端返回的非 hex 颜色（比如 HSL 字符串），前端必须转换后再设值
移动端 iOS Safari 支持有硬门槛，真机测试不可跳过
iOS Safari 直到 15.4 版本才开始支持 input[type="color"]，此前完全降级为普通文本框。更麻烦的是：
- 模拟器常误报“已支持”，必须在真实 iPhone 上验证
- 15.4+ 虽支持，但默认控件尺寸极小，容易被误认为失效
- 加了
appearance: none或某些 CSS 重置可能干扰渲染，尤其在深色模式下 - 不支持透明度，如果业务需要 alpha，得额外配一个
input[type="range"]控制 opacity
input[type="color"] 看似简单，但 value 格式标准化、事件兼容性、移动端支持断层这三点，最容易在上线后突然暴露。别等 QA 提 bug 才补检测逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
