原生 <input type="color"> 是最快实现基础颜色选择器的方式，浏览器调用系统级面板，仅支持 7 位十六进制值（如 #3498db），iOS Safari 15.4 前不支持，不可自定义内部样式，需降级处理并注意无障碍与格式转换。
用 <input type="color"> 最快实现基础颜色选择器
原生 HTML 就支持颜色选择，不需要 JS 或第三方库。浏览器调用系统级颜色面板，体验统一且轻量。
直接写：
<input type="color" id="color-picker" value="#3498db">浏览器会渲染成一个带预览色块的按钮，点击弹出标准颜色选择器（macOS、Windows、Android 各有不同 UI，但行为一致）。
-
value必须是 7 位十六进制格式（如#ff6b6b），不支持缩写（#f6b）、rgb()、hsl() 等，否则会被忽略或重置为默认值 - 初始值为空时，多数浏览器默认显示
#000000，但实际取值是#000000还是空字符串取决于浏览器，建议显式设value="#ffffff" - 监听变化只需绑定
input事件：el.addEventListener('input', e => console.log(e.target.value))，不用等change
为什么 input[type=color] 在 iOS Safari 上不工作
iOS 15.4 之前完全不支持 type="color"，Safari 会降级为普通文本框，用户只能手动输十六进制值——这几乎等于没颜色选择器。
- 检测是否可用：
const support = typeof HTMLInputElement.prototype.showPicker === 'function' && 'color' in document.createElement('input').attributes（更准的是创建元素后检查type是否被识别为"color"） - 真机测试比模拟器可靠：iOS 模拟器常假阳性，务必在真实 iPhone 上验证
- 降级方案不是“加个 polyfill”，而是换交互：比如用
<input type="text">+ 颜色预览<span>+ 手动解析输入，或引入轻量库如vanilla-colorful
想自定义样式？别碰 input[type=color] 的内部结构
你不能用 CSS 选中它的色块、下拉箭头或面板——这些是 Shadow DOM 内部控件，且浏览器不暴露伪元素接口（Chrome 曾有 ::-webkit-color-swatch，但已废弃；Firefox 和 Safari 完全不可样式化）。
立即学习“前端免费学习笔记（深入）”；
- 能做的只有外层控制：宽度、高度、边框、圆角、禁用状态（
:disabled）等，例如width: 44px; height: 44px; border: none; - 若需要“圆形色块+文字标签”或“色板网格”，必须放弃原生控件，改用
<div>+ JS 实现 HSV 滑块或色相环，或集成react-colorful/no-ui-slider类库 - 注意：自定义方案无法继承系统无障碍特性（如屏幕阅读器对原生 color input 的自动标注），需手动补
aria-label和键盘操作逻辑
获取颜色值后怎么安全转成其他格式
input[type=color] 只输出 #rrggbb 字符串，但业务常要 rgb 数组、hex 不带 #、或用于 CSS 变量。转换本身简单，但边界容易漏：
- 校验有效性：用户可能手动修改 input 值为无效 hex（如
#xyz），用正则/^#[0-9A-Fa-f]{6}$/.test(val)判断，别只靠try/catch - 转 RGB 数字：
parseInt(val.slice(1, 3), 16)提取 R，同理 G/B；别用parseInt(val, 16)整体转——会溢出 - 写入 CSS 变量时注意引号：
document.documentElement.style.setProperty('--main-color', val)，val是带#的字符串，直接传即可
原生 color input 是快捷起点，但一旦需求超出“点一下选个十六进制色”，就得接受它能力有限的事实——不是所有“颜色选择”都该用这个标签解决。
