原生 <input type="color"> 跨浏览器支持差：Firefox 不支持、iOS Safari 无法唤起取色器；需用 color in input.type 检测并降级为带正则校验（/^#[0-9a-f]{6}$/i）和实时预览的文本框。
HTML 原生 <input type="color"> 能直接用，但别指望它跨浏览器一致
它确实能快速弹出系统级取色器，chrome、edge、新版 safari 都支持，但 firefox 一直没实现——用户点开就是个普通文本框，输入 #ff0000 也没校验。更麻烦的是，ios safari 虽然渲染了色块，但点击后调不起取色面板，只能手动输 hex。
- 默认值必须是 7 位 HEX（如
"#ffffff"），传"red"或"rgb(255,0,0)"会回退成黑色 - 用户手动修改输入框内容时，
input事件会触发，但change只在选色器确认后才触发，别混用 - 获取值永远返回小写 7 位 HEX（
"#ff6b35"），哪怕用户输的是"#FF6B35"或"FF6B35"
怎么让颜色输入在 Firefox 和 iOS 上不崩
不能只靠原生 <input type="color">，得降级兜底。核心思路是：检测是否支持，不支持就换为带实时预览的 <input type="text"> + 颜色校验逻辑。
- 用
"color" in document.createElement("input").type判断支持性，比查 UA 可靠 - 文本输入框需加
pattern="#[0-9a-fA-F]{6}"和title="请输入 #RRGGBB 格式颜色"提示格式 - 监听
input事件做即时校验：正则匹配/^#[0-9a-f]{6}$/i，不匹配就标红边框或清空值 - 预览色块用
<div style="background-color: #ff6b35"></div>，别用 background-image
input[type=color] 的 value 和 event 行为和你想的不一样
它不像文本框那样“所见即所得”：用户在取色器里拖动滑块时，value 不实时更新；只有关闭面板那一刻才触发 change 并同步值。这意味着没法做实时预览，除非自己实现取色器。
-
input事件在原生色器中**完全不触发**（仅在文本输入模式下触发） -
change事件在 Chrome/Edge 中正常，在 iOS Safari 中可能不触发（因面板无法打开） - 设置
el.value = "red"会静默失败，必须用"#ff0000"格式，否则重置为"#000000" - 想响应拖拽过程？只能放弃原生控件，用
<canvas>或第三方库（如 tinyColorPicker）
要不要引入第三方颜色选择器库
如果项目需要 HSV 滑块、透明度、历史颜色、HEX/RGB/HSL 实时互转，原生控件完全不够用。但引入整包（如 chroma.js 或 react-color）代价不小——一个简单表单多加载 80KB JS，还可能和你的 CSS 主题冲突。
- 轻量替代：用
<input type="range">手搓 HSL 三滑块，配合hsl(${h}, ${s}%, ${l}%)动态生成 preview - 兼容优先：用 Coloris 这类仅 10KB、无依赖、自动降级的库，它会在不支持时 fallback 到文本输入
- 警惕 CSS 框架内置组件（如 Bootstrap 的 color input），它们很多只是加了 class 的
type="text"，没真正增强功能
"rgb(255, 107, 53)" 粘进输入框，原生控件直接拒收，而手写的校验逻辑很容易漏掉这种格式。 
