取色器
图片在线图片取色器与色值转换
从一张截图、海报或者参考图里扒出准确的色号，是前端和设计日常要做的事。系统自带的取色工具往往只给一个 HEX，转成 CSS 需要的 rgb() 或者想在同色相下调深浅时，还得再找一个转换网站。
这个工具把取色和换算放在一起。鼠标在图上移动时会跟着一个放大镜，把光标附近 12×12 的像素放大显示，中心那格就是将要取到的点——在密集的像素或细线上取色时，这一步能明显减少取错的概率。点击后色值锁定，HEX、RGB、HSL 三种写法同时给出，各自带复制按钮。
三个输入框也是可编辑的：随便在哪一栏填一个值，另外两栏和上方色块会立刻跟着变。它能认的写法比较宽松，带不带井号、三位简写、rgb(26, 43, 60) 这样的完整函数、甚至只写 26,43,60 都可以，所以从别处复制来的色值一般能直接粘进去。
如果用的是 Chrome 或 Edge，工具栏上会多出「屏幕取色」按钮，可以直接吸取屏幕上任意位置的颜色，包括其他窗口和应用，不必先截图。Safari 和 Firefox 暂不支持这个接口，改用截图粘贴的方式即可。
图片和取色都发生在你的浏览器里，没有上传、没有次数限制。最近取过的 24 个颜色会留在下方，点一下就能切回来，比对一组配色时不用反复回到原图重取。
功能一览
- 图片取色：鼠标在图上移动时弹出 12×12 像素的放大镜并实时显示色值，点击锁定该像素的颜色
- 三种色值：同时给出 HEX、rgb() 与 hsl() 三种写法，每一行都带独立的复制按钮
- 格式互转：在任意一栏改值，另外两种和色块会同步更新，可识别 #1A2B3C、三位简写、rgb(26, 43, 60)、26,43,60 与 hsl(200, 40%, 30%)
- 屏幕取色：在支持 EyeDropper 的浏览器（Chrome、Edge）会多出一个按钮，可吸取屏幕上任意位置的颜色，不限于本页图片
- 取色历史：最近 24 个颜色以色块形式保留，点击任一色块即可切回，也能一键清空
- 本地留存：当前色值与历史记录存在浏览器本地，刷新页面或下次打开时仍在
- 输入方式：点击选择、拖入，或截图后 Ctrl/Cmd+V 直接粘贴
常见问题
- 上传的图片会被保存吗？
- 图片没有上传这一步。它由浏览器读进内存并画到本地 canvas 上，取色是直接读取画布上那个像素的 RGB 值，全程没有网络请求。取色历史存在你自己浏览器的本地存储里，不会同步到任何服务器，所以从内部系统、后台页面截的图也可以放心拖进来。
- 为什么取到的颜色和设计稿里的不完全一致？
- 有两个常见原因。一是大图会被缩小后再绘制到画布上，缩放过程中相邻像素会被插值混合，所以在边缘、文字和渐变处取到的可能是混合色——请尽量在色块内部的大片区域取色。二是截图受屏幕色彩配置文件影响，同一个颜色在不同显示器上截出来的数值可能有细微差别，此时以设计稿源文件的数值为准。
- 为什么我看不到「屏幕取色」按钮？
- 这个功能依赖浏览器的 EyeDropper 接口，目前只有 Chromium 内核的浏览器（Chrome、Edge 等）支持，Safari 和 Firefox 上按钮不会出现。在这些浏览器里可以用系统截图快捷键截下想取色的区域，然后直接粘贴到页面上，效果是一样的，只是多一步。
- HEX、RGB、HSL 该用哪一种？
- HEX 最紧凑，写 CSS、填设计工具、和同事口头对色号时用它最方便，例如 #1A2B3C。RGB 便于程序计算，也是需要叠加透明度时的常见形态。HSL 用色相、饱和度、亮度三个维度描述颜色，想在同一色相下做深浅变化，只改第三个数字就行，做主题配色时最好用。三种写法描述的是同一个颜色，可以随时互转。
- 支持带透明度的颜色吗？
- 输出的三种格式都不含 alpha 通道，取色读到的也只有 RGB 三个分量。如果你在输入框里粘贴一个 rgba 或 hsla 的值，工具能正确解析，但会忽略透明度部分，只保留颜色本身。需要透明度时，拿到 RGB 数值后自己补上第四个参数即可。
- 取色历史会一直保留吗？
- 历史最多保留 24 个颜色，超出后最早的会被挤掉，重复取同一个色号不会占多余位置。它保存在当前浏览器的本地存储中，关掉页面、重启电脑都还在，但不会跨设备或跨浏览器同步，清理浏览器数据时也会一并消失。需要长期留存的配色建议复制出来另存。