原生 是最轻量兼容方案，支持现代浏览器，自动唤起系统选择器并返回标准7位小写hex值；但不支持alpha、自定义样式及深色模式适配，需监听input/change双事件并手动处理样式与格式转换。
用 <input type="color"> 最快实现，但别指望它能自定义样式
浏览器原生支持的 <input type="color"> 是最轻量、兼容性最好的方案，现代浏览器（Chrome 25+、Firefox 27+、Safari 12.1+）都支持。它会自动唤起系统级颜色选择器，无需 JS 就能拿到十六进制值（如 "#ff0088"）。
常见错误现象：给它加 width 或 height 没反应；用 ::before 或 ::after 伪元素覆盖按钮失败；监听 change 事件却漏掉 input 事件导致拖拽时值不实时更新。
- 默认值必须是 7 位十六进制格式（
#rrggbb），写成rgb(255,0,136)或red会被忽略，回退为#000000 - 移动端 Safari 的弹窗样式不可控，且不支持 alpha 通道 —— 即使你传
#ff0088cc，它也会截断为#ff0088 - 如果需要实时反馈，同时监听
input和change事件，前者响应拖拽/滑块调整，后者只在确认后触发
需要透明度或自定义面板？得自己画 DOM + 监听鼠标/触摸事件
原生 <input type="color"> 不支持 alpha，也不允许改色盘布局、预设色块或历史记录。这时候就得手写一个基于 <canvas></canvas> 或 CSS 渐变色条的控件。
使用场景：设计工具、主题配置页、数据可视化配色面板。核心难点不在“显示颜色”，而在“把坐标准确映射到 HSL/HSV 值”。
立即学习“前端免费学习笔记（深入）”；
”扩展PHP“说起来容易做起来难。PHP已经进化成一个日趋成熟的源码包几十兆大小的工具。要骇客如此复杂的一个系统，不得不学习和思考。构建本章内容时，我们最终选择了“在实战中学习”的方式。这不是最科学也不是最专业的方式，但是此方式最有趣，也得出了最好的最终结果。下面的部分，你将先快速的学习到，如何获得最基本的扩展，且这些扩展立即就可运行。然后你将学习到 Zend 的高级 API 功能，这种方式将不得
- HSL 色相环用
hsl(${hue}, 100%, 50%)配合radial-gradient可快速模拟，但饱和度/明度二维区域需用linear-gradient叠加，顺序错一点颜色就偏 - 移动端 touch 事件必须同时处理
touchstart/touchmove/touchend，仅靠mousemove在 iOS 上完全不触发 - 获取像素颜色时，
canvas.getContext('2d').getImageData()返回的是 RGBA 数组，直接取[0]是 R 值，不是 hex —— 别忘了.toString(16).padStart(2,'0')
input[type="color"] 的 value 值永远是 7 位小写 hex，别试图解析它
它的 value 属性返回的是标准化后的字符串，比如用户输入 #F08，读出来是 "#ff0088"；输入 blue，读出来是 "#0000ff"。这个转换由浏览器完成，JS 无法干预，也不该干预。
容易踩的坑：用正则去匹配 #rgb 或 #rrggbb 格式做校验；用 parseInt(value.slice(1), 16) 当整数处理；或者拿它和后端传来的 rgb() 字符串直接比较是否相等。
- 校验只需判断
value.length === 7 && value[0] === '#'，其余交给浏览器 - 要转 RGB 对象？用
parseInt(value.slice(1,3), 16)分别取 r/g/b，别用parseInt(value.substr(1), 16)—— 会把整个六位当十进制数解析 - 和服务端交互时，统一约定用小写 7 位 hex，避免前端传
#FF0088、后端存成#ff0088后比对失败
深色模式下原生 color input 不会自动适配背景，得手动加 class 控制
原生控件的预览小方块（swatch）在深色背景下常显示为黑边+灰底，和周围 UI 断层。这不是 bug，是浏览器没读取 prefers-color-scheme 去动态换 skin。
解决办法只能是包裹一层容器，用 CSS 强制重置其 appearance 并控制外层样式：
input[type="color"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: none;
}
input[type="color"]::-webkit-color-swatch {
border: 1px solid var(--border-color);
border-radius: 4px;
}
input[type="color"]::-moz-color-swatch {
border: 1px solid var(--border-color);
border-radius: 4px;
}
-
::-webkit-color-swatch和::-moz-color-swatch是唯二可样式化的伪元素，其他部分（如下拉箭头、面板）不可触达 - 深色模式下
var(--border-color)应设为#444类似值，否则默认浅灰边在深背景上几乎看不见 - 别试图用
filter: invert()处理 swatch —— 它会把颜色本身也翻转，预览失真
