input[type="color"]不能当吸管工具用，因其仅为颜色输入器而非拾取器，不读像素、不监听坐标、不支持透明度，返回值固定为小写#rrggbb格式；真要从图片吸色须用canvas+getImageData()。
input[type="color"] 能直接用，但别指望它能“取”图中任意位置的颜色——它只负责让用户从系统调色板里选一个颜色值。
为什么 input[type="color"] 不能当“吸管工具”用
这个原生控件本质是“颜色输入器”，不是“颜色拾取器”。它不读像素、不监听鼠标坐标、不访问图像数据。点击后弹出的面板完全由操作系统或浏览器控制，开发者无法干预其内部逻辑或获取中间状态（比如拖动时的实时色值）。
- 返回值固定为小写
#rrggbb格式，不支持透明度（alpha），即使某些浏览器显示带 alpha 的面板，value仍忽略第4字节 - 在 Safari（macOS/iOS）上，
input[type="color"]不触发input事件，只有change；而 Chrome/Firefox 支持input实时响应 - 移动端 Android 某些 WebView 或旧版 UC 浏览器可能降级为文本输入框，连面板都不弹
真要从图片/画布里“吸取”颜色，必须用 canvas + getImageData()
这是唯一可靠的方式：把目标图像或调色板绘制到 <canvas> 上，再通过鼠标事件定位像素，读取 RGBA 值。
- 注意
e.offsetX/e.offsetY在缩放页面或存在滚动时不准，应改用getBoundingClientRect()计算相对坐标 -
getImageData(x, y, 1, 1)返回的是Uint8ClampedArray，索引 0–2 是 R/G/B，索引 3 是 Alpha（0–255），需判断是否全白背景下 Alpha 是否有意义 - 如果图像来自跨域资源（如 CDN 图片），
canvas会被污染，getImageData()抛出安全错误——必须设img.crossOrigin = "anonymous"且服务端配 CORS 头
如何把 RGB 转成其他格式（HEX/HSL/HSV）
浏览器不提供内置转换函数，得自己算。HEX 和 HSL 最常用，建议封装成工具函数：
立即学习“前端免费学习笔记（深入）”；
- RGB → HEX：
("#" + ((1 ，注意补零（<code>r=10得转成"0a"） - RGB → HSL：公式固定，但要注意除零（如
max === min时色相无定义）、浮点精度（Math.round后加 % 符号） - 别硬套网上抄来的 HSV 转换代码——很多把 HSV 和 HSB 当同一个东西，实际 Hue 相同，但 Saturation/Value 定义有细微差别，图表渲染会偏色
最易被忽略的一点：颜色空间不是线性的。用 canvas 读取的像素值默认是 sRGB 编码，如果你要做颜色混合、亮度计算或与专业设计软件对齐，得先做伽马校正，否则深色区域计算会严重失准。
