html5 input[type=”color”]始终返回7位十六进制字符串（如#rrggbb），不支持透明度、rgb/hsl格式，且默认值必须为合法#rrggbb格式；样式几乎不可定制，应监听input事件而非change事件。
html5 input[type="color"] 取到的值永远是 7 位十六进制字符串
它返回的不是 RGB 数组、不是 HSL 对象，也不是带 alpha 的 #rrggbbaa —— 浏览器目前（截至 2024）统一返回标准的 #rrggbb 格式，哪怕你用拾色器选了透明色，alpha 信息也直接丢弃。
这意味着：
• 不能靠这个控件原生支持透明度选择
• 后端或 js 处理时别假设会拿到 rgb(…) 或 hsl(…)
• 如果需要存储/比对颜色，#fff 和 #ffffff 是等价的，但控件只输出后者
给 input[type="color"] 设置默认值必须用合法 #rrggbb 格式
写成 value="red"、value="rgb(255,0,0)" 或 value="transparent" 都无效，浏览器会回退到默认色（通常是 #000000）。
正确做法：
• 直接写 value="#ff0000" 或 value="#f00"（注意：部分旧版 safari 不支持 #f00 缩写，建议统一用 7 位）
• JS 动态赋值时，先标准化：用正则或 String.prototype.padStart() 补全为 7 位再塞进 value
• 如果从 CSS 变量或 computedStyle 读颜色，得先用 window.getComputedStyle + 正则提取 hex，不能直接赋值
立即学习“前端免费学习笔记（深入）”；
input[type="color"] 的样式几乎无法定制，别白费劲改按钮外观
它的 ui 完全由系统和浏览器控制：chrome 显示为方块+下拉，Safari 是圆角色块，firefox 更像一个带预览的小按钮。CSS 能影响的只有：
• 宽高（width/height）—— 但超出部分可能被裁剪
• 字体、边框、阴影等外层样式 —— 不影响内部拾色器
• appearance: none 在部分浏览器中会让控件“消失”或退化为文本框
真正能做的：
• 用 label 包裹它，点击 label 触发弹出
• 用伪元素（如 ::before）在旁边加图标或文字说明
• 如果必须高度定制（比如要带 alpha 滑块），老老实实用 input[type="range"] + canvas 自绘，别硬撬原生控件
监听颜色变化要用 input 事件，不是 change
用户拖动拾色器滑块或实时调整 HSL 值时，change 只在失去焦点后触发一次；而 input 事件在每次颜色变动后立即触发 —— 这才是响应式更新预览色块、同步到其他输入框的正确时机。
示例：<input type="color" id="picker">document.getElementById("picker").addEventListener("input", e => console.log(e.target.value));
• 不要用 onchange 属性写法，容易覆盖
• 移动端上，某些 android webview 对 input 事件支持不稳定，可降级监听 change 并加防抖
最常被忽略的一点：不同系统下拾色器返回的色域和精度不一致，ios 的色彩面板更倾向 sRGB，而 windows 的可能包含显示器校准信息 —— 如果你的应用涉及设计协作或印刷输出，别直接拿 input[type="color"] 的值当最终颜色依据。