原生 现代浏览器已原生支持，返回标准 #rrggbb 格式字符串，需设 id 和 name 以保障表单提交，仅 change 事件可靠响应，不支持 alpha 与样式自定义。
直接用 <input type="color"> 就够了
现代浏览器（Chrome、Firefox、Edge、Safari 15.4+、Opera）原生支持 <input type="color">，不需要任何 JS 或第三方库。它默认返回标准的 7 位十六进制字符串（如 #ff0000），且自动校验格式——用户无法手动输入非法值，粘贴错误格式也会被浏览器静默修正或忽略。
常见错误是给 value 赋了非标准值，比如 rgb(255,0,0) 或 red，这会导致控件回退到黑色（#000000）；必须用 #RRGGBB 或 #RGB 格式。
-
id和name属性必须设置，否则表单提交时后端收不到字段 - 默认值推荐显式写上，例如
value="#4a90e2"，不写则多数浏览器默认为#000000 - IE 完全不支持，会降级为普通文本框，但可通过
Modernizr.inputtypes.color或简单特性检测判断
监听颜色变化要用 change 事件，不是 input
<input type="color"> 的值只在用户确认选择（点击“确定”或关闭调色器）后才触发更新，所以 change 是唯一可靠事件。绑定 input 事件基本无效——它不会在拖拽色盘或调整滑块时实时触发。
示例：
const colorInput = document.getElementById('favColor');
colorInput.addEventListener('change', () => {
console.log(colorInput.value); // 比如 "#34c759"
document.body.style.backgroundColor = colorInput.value;
});
- 不要依赖
keyup或blur：它们无法捕获调色器内部操作 - 移动端 Safari 在某些版本中可能延迟触发
change，建议加 100ms 防抖（仅当需高频响应时） - 如果需要实时预览（如边调边看），得换用 Pickr 等可编程控件，原生控件做不到
样式自定义极其有限，别硬套 CSS
你不能用 CSS 修改原生颜色选择器的调色板外观，appearance: none 对它无效，伪元素（如 ::after）也无法插入内容。部分浏览器允许改按钮尺寸或边框，但行为不一致：
- Chrome 允许设置
width/height和border，但调色器弹窗位置不受影响 - Safari 会忽略大部分尺寸类样式，仅响应
cursor和opacity - 所有浏览器都不支持
background-image或自定义 swatch 样式
如果设计要求高度统一（比如主题色匹配、圆角、禁用状态灰度），必须放弃原生控件，改用 Pickr、Iro.js 或自研方案。
与表单提交和后端配合的关键点
原生 color 输入在表单提交时和其他 input 一样，以键值对形式发送，例如 favoriteColor=%234a90e2（URL 编码后）。后端无需特殊处理，按普通字符串接收即可。
- PHP 中直接取
$_POST['favoriteColor']，值就是#4a90e2 - Node.js + Express 中用
req.body.favoriteColor，注意确保已启用urlencoded中间件 - 不要试图在前端做格式转换再提交——比如转成 RGB 后再塞进隐藏域，这反而增加出错面
- 若需 alpha 通道（透明度），原生控件不支持；必须用
input[type="text"]配合 Pickr 或自定义解析
真正容易被忽略的是：颜色值始终是字符串，哪怕用户选的是纯黑，后端收到的也是 "#000000"，不是数字或对象——别在服务端做类型强转或 JSON 解析，徒增异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
