HTML原生color控件默认返回7位十六进制颜色字符串（如#ff0000）；监听change事件获取最终选择值，input事件可实时响应拖拽（Chrome/Edge支持，Safari有限）；值恒为标准#RRGGBB格式，不支持透明度，无需额外转换。
HTML 原生的 `` 控件默认返回的是 7 位格式的十六进制颜色字符串（如 #ff0000），你只需监听其 change 或 input 事件，然后读取 value 属性即可。
基础用法：监听 change 事件获取颜色值
这是最常用的方式，适用于用户完成选择后触发：
- HTML 中定义：
<input type="color" id="colorPicker"> - JavaScript 中绑定事件：
document.getElementById('colorPicker').addEventListener('change', function() {<br> console.log(this.value); // 如 "#3a86ff"<br>});
实时响应：用 input 事件监听拖拽过程
某些浏览器（如 Chrome、Edge）在用户拖动色盘时会持续触发 input 事件，适合做实时预览：
- 代码示例：
colorPicker.addEventListener('input', () => {<br> const hex = colorPicker.value; // 始终是 #RRGGBB 格式<br> preview.style.backgroundColor = hex;<br>}); - 注意：
input事件在 Safari 中支持有限，change更兼容。
确保格式统一：不需要额外转换
原生 color 输入框始终返回标准 7 字符十六进制字符串（#RRGGBB），无需手动转大写、补零或处理 rgb：
立即学习“前端免费学习笔记（深入）”；
- 它不会返回简写形式（如
#f00）或 rgba、hsl 等其他格式； - 即使用户通过系统拾色器选中透明色，该控件也不支持 alpha 通道，始终忽略透明度；
- 所有主流浏览器均保证返回值为合法的
#RRGGBB字符串。
兼容性与注意事项
虽然简洁好用，但需留意几点实际限制：
- 旧版 IE（≤11）和部分移动浏览器（如 iOS Safari 早期版本）不支持
type="color"，可降级为文本输入并配合正则校验； - 无法自定义样式（如按钮外观、调色盘布局），如需高级功能建议使用第三方库（如 iro.js、spectrum）；
- 初始值必须是有效十六进制色值（如
value="#000000"），否则会回退为默认（通常是 #000000）。
