🎯 取色器

从图片中取色——点击保存到调色板

✓ 永久免费 · ✓ 无需注册 · ✓ 文件不上传 · ✓ 离线可用

🔒 你的图片绝不会离开你的设备。 所有处理都通过 Canvas getImageData 像素读取在浏览器本地完成。无上传、无服务器、无追踪。

功能特点

像素级精准取色 — 鼠标悬停在图片上，放大镜会显示你所在的那个像素和周围像素。点击即可保存；方向按钮可以一次移动一个像素。
多种格式 — 获取 HEX、RGB 和 HSL 格式的颜色，每种都有自己的复制按钮——可直接用于 CSS、设计工具或代码。半透明像素会带上透明度（#rrggbbaa、rgba）。
保存调色板 — 构建最多 12 种颜色的调色板。可复制单个颜色或整个调色板。
支持任意图片 — 从照片、截图、设计稿——任意图片来源中提取颜色。

使用方法

上传图片 — 拖入想要提取颜色的任意图片。
悬停并取色 — 将鼠标移到图片上（手机上轻点）——放大镜会显示该像素。点击保存到调色板；方向按钮可微调取色点。
复制并使用 — 用按钮复制 HEX、RGB 或 HSL，点击已保存的颜色复制其 HEX，或用「复制全部」获取整个调色板。

使用场景

从 logo 或网站截图中提取品牌色
精确获取设计中任意元素的颜色
获取 CSS 样式表所需的 HEX/RGB 值
从照片中构建灵感配色方案

常见问题

颜色取值精确吗？

精确到你指着的那个像素。无论图片以多大尺寸显示，位置都会换算到图片本身的像素上，放大镜会把这个像素框出来并显示周围像素。数值是浏览器从文件解码出的 sRGB 值：广色域（Display P3）照片会先转换为 sRGB，压缩很重的 JPG 本身可能就和原稿有细微差别。

可以复制 RGB 或 HSL 格式吗？

可以。面板上 HEX、RGB、HSL 各有一个复制按钮，复制当前显示的颜色。点击已保存的颜色会复制它的 HEX，并重新显示三种格式。

手机上能用吗？

能。轻点图片即可取色。指尖会盖住几十个像素，所以可以用方向按钮一次移动一个像素——放大镜和图片上的圆圈会显示你的位置。

透明像素怎么办？

半透明像素会带上透明度（#rrggbbaa、rgba()、hsla()）。完全透明的像素没有颜色，所以不能保存。

来自 Milo 🐨 的笔记

2026-10-08

说来惭愧：取色器以前大多数时候读的是错的像素。它默认每张图都按 700 像素宽显示，所以小 logo、长截图或者在手机上，它报的是图里别处的颜色（有时是图外的黑色）。现在读的就是你指着的那个像素，还有一个放大镜把它和周围像素一起放大显示，让你确认没点偏。HEX、RGB、HSL 各有一个复制按钮；手机上图片占满宽度，并有方向按钮一次移动一个像素；透明像素会如实说明；在首页拖进图片也可以直接送到这里。