color输入框的value属性直接返回标准十六进制字符串，即7位小写#rrggbb格式（如"#ff6b35"），不支持RGB、HSL、alpha或命名色，初始值为"#000000"，仅触发change事件，需手动解析RGB。
color输入框的value属性直接返回标准十六进制字符串
HTML <input type="color"> 选中颜色后，input.value 返回的是7位小写十六进制格式（如 "#ff6b35"），不是RGB数组、不是CSS变量，也不带alpha通道。这是浏览器原生行为，无需额外解析。
常见错误是试图用 input.valueAsNumber 或 input.valueAsDate 读取——这两个属性对 type="color" 始终返回 null，因为它们只适用于 number 和 date 类型。
- 值始终以
#rrggbb形式返回，即使用户在色盘里选了带透明度的颜色，浏览器也忽略alpha，只取不透明版本 - 初始值未设置时，
value默认为"#000000"（不是空字符串） - 用户手动在输入框里键入非法值（如
"#xyz"）时，value会回退到上一个有效值，不会抛错
监听change事件比input事件更可靠
change 事件在用户确认选择（点击OK、失焦或回车）后触发；而 input 事件在每次颜色微调时都可能高频触发（尤其拖拽色盘时），但部分浏览器（如旧版Safari）对 type="color" 的 input 事件支持不稳定，甚至不触发。
实操建议统一用 change：
立即学习“前端免费学习笔记（深入）”；
<input type="color" id="picker">
<script>
const picker = document.getElementById('picker');
picker.addEventListener('change', () => {
console.log(picker.value); // 如：#4a90e2
});
</script>
需要RGB或HSL值时必须手动转换
浏览器不提供原生API把 value 转成RGB对象或HSL值，得自己写解析逻辑。注意十六进制字符串可能有简写形式（如 "#f00"），但 type="color" 的 value 永远返回7位格式，所以可直接按3组两位十六进制处理。
简单RGB提取示例：
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
}
// hexToRgb('#ff6b35') → { r: 255, g: 107, b: 53 }
- 不要用正则或split硬拆，
slice()更快更稳 - 如果后续要用于CSS，注意
rgb()函数不接受十六进制，必须转成十进制数字 - 没有现成的
getComputedStyle可用——它查的是样式，不是输入框当前值
移动端兼容性与替代方案的取舍
Android Chrome 和 iOS Safari 都支持 type="color"，但iOS 15.4之前存在一个坑：点击色盘后，change 事件可能不触发，需额外监听 blur 并检查 value 是否变化。不过现在绝大多数设备已无此问题。
如果项目必须支持IE或老版UC浏览器（它们完全不识别 type="color"），得降级：type="text" + 第三方库（如 iro.js），并用 input[type="color"]::not(:valid) 做CSS检测。但纯现代项目，没必要提前加polyfill——浏览器没实现就是没实现，强行模拟反而增加维护成本。
真正容易被忽略的是：用户可能根本没点“确定”，而是直接关掉色盘弹窗，此时 value 不变，但你的UI状态可能误以为已更新。所以关键操作（比如提交主题色）前，最好显式校验是否真发生了变更。
