在线取色器

拖动色相、饱和度、明度三个滑块即可实时调整颜色；也可点击左侧原生颜色选择器，或在 HEX 输入框直接输入颜色值（如 #2457D6）。右侧会同步显示 HEX、RGB、HSL 三种格式，点击复制按钮即可拷贝。

将图片拖拽到上传区域，或点击上传、粘贴截图。图片加载后，在图片上移动鼠标可查看当前像素颜色，点击即可复制该色值并同步到取色器。图片不会上传服务器，仅在本地 Canvas 中读取像素。

会。最近使用的 20 个颜色会保存在浏览器本地（localStorage），刷新页面后仍可在"最近使用的颜色"中点击回选。可一键清空记录。

取色器解决的是一个具体问题：屏幕上已经有一个好看的颜色，你想知道它的数值。 最常见的做法是上传图片后点选取色——把图片画到 Canvas 上，读取鼠标位置的像素值。 它的优点是零权限、任何浏览器都能用；局限是只能取图片内的颜色，取不到浏览器窗口之外的屏幕内容。

现代浏览器还提供了原生 EyeDropper API，授权后可以吸取整个屏幕（包括其他窗口）的颜色。 它需要用户手势触发并弹出确认，且并非所有浏览器都支持；不支持时会自动回退到图片取色， 因此两种入口并存是合理的做法。

取到的数值为什么会和想象中不一样？主要有三类原因。 其一是色彩空间：绝大多数网页内容工作在 sRGB 空间， 而广色域屏幕（Display-P3）显示同样的 sRGB 数值会更鲜艳，反过来用 P3 数值落在 sRGB 环境就会发灰。 其二是色深与抖动：8 位通道只能表达 256 级，渐变区域常被抖动处理，相邻像素值并不完全一致。 其三是透明度：半透明元素叠加后的颜色是合成结果，取到的是合成值而不是元素本身的色值， 设计还原时需要先把背景分离出来。

实用建议：取色后先确认你要的是设计值还是渲染值。 还原设计稿要的是设计值，应从源文件读取；排查「为什么线上颜色和稿子不一样」则要渲染值， 用取色器在真实页面上取。 另外，截图压缩（尤其是 JPEG）会改变边缘像素，取色应尽量避开文字边缘与压缩噪点区域。

取色结果可以在本站直接转成 HEX / RGB / HSL / HSV 等写法， 也可以拿去做对比度检测：把取到的前景色与背景色一起验一遍对比度， 能提前发现「看起来清楚、实际不达标」的配色。所有处理都在本地完成，图片不会上传。

两个小技巧能显著提高取色准确度：把图片放大到 200% 以上再取，可以避开抗锯齿边缘混出的中间色； 同一区域多点取样，取出现次数最多的那个值，比单点更接近真实色值。 另外，若图片来自广色域设备或带有 EXIF 色彩配置，先确认它的色彩空间， 再决定取到的数值是否需要换算回 sRGB，否则在不同设备上会明显偏色。