HTML5 的值恒为7位小写十六进制字符串（如"#ff0000"），仅触发change事件，需手动解析RGB，且不支持alpha及旧版Safari。
HTML5
浏览器原生的 不会输出 rgb()、hsl() 或命名色（如 "red"），它只返回标准的 7 位小写十六进制字符串，例如 "#ff0000"。这是规范强制行为，所有主流浏览器（Chrome、Firefox、Safari、Edge）都一致。
这意味着你不能靠 input.value 直接拿到 Color 对象或解析后的数值——它就是个纯字符串，且始终满足正则 /^#[0-9a-f]{6}$/。
监听 change 事件获取颜色值，不要用 input 或 keyup
type="color" 的交互逻辑特殊：用户拖动调色盘或点击拾色时，input 事件不会触发；只有确认选择（比如点击“确定”或失焦）后才会触发 change 事件。用错事件会导致颜色取不到或重复取值。
- ✅ 正确：监听
change—— 值已稳定，可安全使用 - ❌ 错误：监听
input—— 在 Chrome/Firefox 中几乎不触发；Safari 可能触发但不可靠 - ❌ 错误：监听
keyup—— 键盘对颜色输入框无意义，无法输入
const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('change', () => {
console.log(colorInput.value); // 总是类似 "#3a86ff"
});
从 #rrggbb 提取 RGB 数值需手动解析
虽然值是字符串，但你要做亮度计算、对比度检查或转 HSL，就得自己拆解。JavaScript 没有内置 API 把 "#3a86ff" 转成 { r: 58, g: 134, b: 255 }，必须手写解析逻辑。
立即学习“前端免费学习笔记（深入）”；
注意点：
- 字符串固定 7 位，第 0 位是
"#"，后面每两位一组对应 R/G/B - 用
parseInt(str.slice(1,3), 16)等方式转换，别忘了radix=16 - 不要用
new Color()或Color.parse()—— 浏览器不提供Color构造函数（那是 CSS Color Module Level 4 提案，尚未实现）
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 };
}
console.log(hexToRgb("#3a86ff")); // { r: 58, g: 134, b: 255 }
移动端和 Safari 的兼容性与体验差异
iOS Safari 和旧版 Android WebView 对 type="color" 支持较弱：可能回退为文本输入框，或调起系统级但样式不可控的 picker。它不会报错，但用户看到的不是预期控件。
如果你需要统一外观、支持 alpha 通道、或兼容 iOS 15.4 以下版本，就不能只依赖原生 input —— 得用第三方库（如 vanilla-picker、react-colorful）或自己封装 canvas 拾色器。
另外，input.type = "color" 无法设置透明度（alpha），value 永远是不带 alpha 的 #rrggbb。想支持 RGBA，必须换方案。
