关于在线取色器
做 UI 配色、把产品照片的主色调抄进 PPT、从截图里取一个精确的品牌色，靠肉眼估色往往差出十几度色相。这个工具把图片画到 Canvas 上，鼠标指向任意像素就实时输出该点的 HEX、RGB 和 HSL 数值，支持放大镜精确对准单个像素、一键复制色值，以及自动提取图片中出现频率最高的若干主色。结果可以直接粘进 CSS、Figma 或 Photoshop。要注意相机直出的照片存在色差和压缩噪点，相邻像素颜色可能不同，主色提取给出的只是参考区间。图片在本地读取，不上传。
在线取色器怎么用
- 上传图片，也可以直接把截图粘贴进页面，画布会按原始像素尺寸渲染整张图。
- 把鼠标移到目标位置，右侧面板会同步显示该像素的 HEX、RGB、HSL 三种色值。
- 像素太小难以点准时切换到放大镜模式，按整数倍放大局部，避免取偏一两个像素。
- 点击色块或复制按钮把 HEX 值复制到剪贴板，直接粘进 CSS 变量或设计软件。
- 需要整套配色时执行主色提取，得到按出现频次排序的一组色值，再逐个核对后取用。
使用提示
- 取色结果受图像压缩影响，大面积同色块的中心区域最可靠，渐变过渡带和物体边缘不要去取。
- 显示器色域和浏览器色彩管理会让同一个 HEX 在不同屏幕上显示不同，做印刷或跨设备配色时以数值为准并实机验证一次。
- 从聊天软件截图取到的颜色可能已被平台压缩或加滤镜，取品牌色这类精确需求应从设计源文件或官网原始素材上取。
在线取色器常见问题
取出来的颜色和实际不符是什么原因
常见原因有三个：图片本身有压缩噪点，相邻像素色值并不相同；手机照片受白平衡和滤镜影响整体偏色；浏览器把 sRGB 图片按广色域显示器做了色彩管理。要精确取色，就找大面积纯色区域并对多个像素取平均，不要取边缘。
HEX 和 RGB 应该用哪个
两者描述同一个颜色，可以互相换算。HEX 写 CSS 最短，形如 #1A73E8；RGB 方便做算术和透明度计算，形如 26,115,232。写网页样式用 HEX，做图像处理、调透明度或计算色差时用 RGB，HSL 则更适合调明暗和饱和度。
能从图片里提取整套配色方案吗
可以，主色提取会统计像素颜色分布，输出出现频次最高的一组色值。但照片受光照影响，同一种颜色在不同区域会产生几十个近似值，结果偏向整体氛围而不是精确色板。做配色时把它当参考，再手工收敛到 3 到 5 个主色。
能在 HEX 和 HSL 之间互相转换吗
可以。点击任一色值旁的数字就能在同一像素的 HEX、RGB、HSL 三种表示之间切换并复制。若还需要转成 CMYK 或潘通色号，得另找专业软件，那类转换依赖印刷设备的 ICC 配置文件，浏览器端拿不到这些信息。