直接读 value 属性即可获取选中颜色值，但必须在 input 或 change 事件中获取，不可在页面加载时读取；值恒为 7 位十六进制字符串（如 "#ff00aa"），需手动解析为 RGB 数字，且移动端兼容性差，iOS Safari 16.4 前仅支持 change 事件。
HTML <input type="color"> 怎么拿到选中的颜色值
直接读 value 属性就行，但必须等用户操作后触发事件再取，不能页面一加载就取——此时值是浏览器默认值（通常是 "#000000"，但不可靠）。
常见错误是写成：document.querySelector('input[type="color"]').value 放在脚本顶部执行，结果拿到的是初始值，不是用户选的。
- 正确做法：监听
input或change事件 -
input事件实时响应拖拽/点击过程（每改一次发一次），change只在用户确认后触发（比如点完“确定”或失焦） - 值始终是 7 位格式的十六进制字符串，如
"#ff00aa"，不会返回 rgb()、hsl() 或短格式"#f0a"
为什么 input 事件里取到的值有时没变
某些浏览器（特别是旧版 Safari）对 <input type="color"> 的 input 事件支持不完整，可能只在 change 时触发，或者连续快速切换颜色时漏发事件。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 稳妥方案：优先用
change，兼顾兼容性；若需实时预览，加个防抖（debounce）处理input事件 - 不要依赖
input的频率做 UI 同步，比如实时渲染色块，建议用change+ 手动触发一次初始同步 - 移动端 iOS Safari 直到 iOS 16.4 才完全支持
input事件，之前只能靠change
value 拿到的是字符串，怎么转成 RGB 数字
浏览器不提供内置解析方法，得自己拆。注意：它永远是 #rrggbb 格式（7 字符），没有透明度，也不支持命名色（如 "red"）。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：先校验
value是否匹配/^#[0-9a-fA-F]{6}$/，避免意外值（比如用户手动输入非法内容，虽然 input color 不允许编辑，但 JS 仍可能被篡改） - 简单转换示例：
const hex = input.value; // "#ff33aa" const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16);
- 别用
parseInt(hex, 16)直接转——会把"#ff33aa"当作整体解析，结果是 NaN
移动端真机上点开调色盘却没反应？
不是代码问题，是系统级限制：iOS Safari 和部分安卓 WebView 对 input[type="color"] 的原生支持较弱，可能 fallback 成文本框，或点不动。
- 检测是否真正支持：
const support = typeof document.createElement('input').type === 'string' && 'color' in document.createElement('input') - 不支持时，得降级用第三方库（如 tinyColor picker）或自建 HSV 滑块，不能只靠 CSS 隐藏/显示
- 微信内嵌 WebView（X5 内核）对 color input 支持极差，基本必 fallback
