原生 input type="color" 渲染为系统级颜色选择器，仅支持7位十六进制色值（如"#ff0000"），不支持透明度、HSL、命名色或短格式；Chrome、Edge、Firefox及Safari 16.4+支持，旧版Safari不支持；value必须为严格7字符格式，否则回退默认#000000；外观由系统控制，CSS几乎无法自定义。
input type=color 的基本行为和浏览器兼容性
原生 input type="color" 渲染为系统级颜色选择器，不是自定义弹窗，也不依赖 JavaScript。它返回标准 7 位十六进制字符串（如 "#ff0000"），**不支持透明度、HSL、命名色或短格式（如 "#f00"）**。Chrome、Edge、Firefox 和 Safari（16.4+）已支持，但旧版 Safari（change 事件。
如何监听颜色变化并获取值
必须用 input 或 change 事件监听，不能靠 click —— 用户点开调色器不等于选中颜色。注意：Safari 在取消选择时不会重置值，而 Chrome 会保留上次有效值。
<input type="color" id="picker" value="#00aaff">
<script>
const picker = document.getElementById('picker');
picker.addEventListener('input', () => {
console.log('当前值:', picker.value); // 始终是 #RRGGBB 格式
});
</script>
为什么设置 value="#000" 或 "red" 会失效
input type="color" 对 value 属性极其严格：只接受完整 7 字符十六进制色值（#rrggbb）。以下写法都会被忽略，回退到默认值（通常是 #000000）：
value="red"value="#000"value="rgb(0,0,0)"-
value="#00000080"（带 alpha）
修复方法：服务端或 JS 中统一转成大写、补零、7 位格式，例如用 String.prototype.padStart(7, '#') 配合正则校验。
立即学习“前端免费学习笔记（深入）”；
无法自定义样式或替换 UI？这是设计使然
该控件的外观完全由操作系统控制，CSS 几乎无法干预：::-webkit-color-swatch 可微调 Chrome 下的预览方块背景，但无法修改调色器弹窗本身；appearance: none 在多数浏览器中无效。若需主题一致、支持透明度或 HSL 滑块，必须放弃原生控件，改用第三方库（如 vanilla-picker 或 react-colorful），或自己实现 canvas + input 组合方案。
