input type="color"的value始终返回小写7位十六进制字符串（如"#ff0000"），不支持透明度、rgb()、hsl()或命名色；监听颜色变化应优先用input事件实现实时响应，change仅在确认后触发一次。
color input 的 value 始终返回 7 位十六进制字符串
<input type="color"> 在 JS 中读取 value 属性时，浏览器**强制标准化为小写、带 # 号的 7 位格式**（如 "#ff0000"），不会返回 rgb()、hsl() 或无 # 的简写（如 "f00"）。这是规范行为，不是 bug。
直接用 input.value 就行，无需额外解析或正则匹配：
const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('input', () => {
console.log(colorInput.value); // 每次选色立即输出类似 "#3a86ff"
});为什么不能用 change 事件监听颜色变化？
change 事件只在用户确认（比如点击“确定”或失焦）后触发，而 input 事件在每次拖动滑块、点击色盘时实时触发。对颜色拾取这种高频交互，input 更准确及时。
- 用户拖动色盘 → 触发
input（多次） - 用户点击“取消” → 不触发
change，且value保持原值 - 用户点“确定”或移出焦点 → 触发
change（仅一次，且值已更新）
如何兼容旧浏览器或做格式校验？
所有现代浏览器（Chrome 27+、Firefox 25+、Safari 12.1+、Edge 12+）都支持 type="color"，但 IE 完全不支持（会降级为 text 输入框）。如果需要兜底：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
input.type === 'color'检测是否原生支持 - 不支持时，可 fallback 到第三方库（如 tinyColor）或自建色盘
- 校验
value是否合法：正则/^#[0-9a-f]{6}$/i足够（注意它一定是 6 位，不会出现 3 位简写）
别把 value 当 RGB 解析，也别手动转大写
有人误以为 value 是 RGB 字符串，试图用 getComputedStyle 或 canvas 提取；也有人习惯转成大写（value.toUpperCase()）——其实没必要。
-
value就是标准十六进制，可直接传给 CSScolor、background等属性 - CSS 接受大小写混合，但浏览器统一返回小写，强行转大写纯属冗余
- 若需 RGB 数值，用
parseInt(value.slice(1), 16)拆解，再分别取红绿蓝通道
真正容易被忽略的是：用户可能手动编辑 input 的文本框内容（比如删掉 # 或输错字符），此时 value 会变成空字符串或非法值，需要加空值判断。
