取色器
取色器工具是一款从图片中提取颜色(颜色代码)的工具。载入上传的图片或图片 URL 后,可通过显示的放大镜放大,并按像素点击拾取颜色。
将图片拖到这里
或
支持 PNG / JPG / WebP / GIF / BMP / SVG(最大 20MB)。.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg
已提取的颜色0 项
点击图片中的像素后,颜色将添加到这里。
相关工具
取色器是什么?
取色器工具是一款从图片中提取颜色(颜色代码)的工具。载入上传的图片或图片 URL 后,可通过显示的放大镜放大,并按像素点击拾取颜色。
取得的颜色可在 HEX(#RRGGBB)、RGB、HSL 三种形式间切换显示。放大镜倍率提供 5x / 10x / 20x 三档。拾取多种颜色组成调色板后,可将其按 JSON 或 CSS 变量形式复制到剪贴板,直接粘贴到设计稿、样式指南或代码中。
在 Chrome 系浏览器中还可使用「从屏幕拾取颜色」(EyeDropper API),不限于图片,可在桌面屏幕全局拾取颜色。载入的图片全部在用户的浏览器内处理,不会发送至外部服务器。全程在浏览器中完成。
使用方法
- 上传图片文件,或粘贴图片 URL 载入。
- 将光标移到图片上时会显示放大镜。选择放大镜的倍率(5x / 10x / 20x)。
- 点击想按像素精确确认的位置,该点的颜色会被加入调色板。
- 在 HEX / RGB / HSL 之间切换颜色显示形式以确认。
- 在支持的浏览器中,可通过「从屏幕拾取颜色」按钮从桌面屏幕任意位置拾取颜色。
- 通过「复制 JSON」「复制 CSS 变量」可一并导出提取的调色板。
使用场景
- 希望从设计稿中取出配色并作为 Web 网站 CSS 变量实现的 Web 设计师、前端工程师。
- 希望从竞品站或参考设计的截图中分析配色的 UI 设计师。
- 希望从照片或素材中提取品牌色以制作配色指南的品牌负责人。
- 希望严格取出插画或照片特定部分颜色的插画师、摄影师。
- 希望让资料或演示中所用图表的颜色与参考图保持一致的商务人士。
注意事项
- 「从屏幕拾取颜色」(EyeDropper)仅在部分 Chrome 系浏览器可用。Firefox / Safari 等不支持时不会显示。
- 通过图片 URL 载入时,若目标图片服务器不允许 CORS(Cross-Origin Resource Sharing),颜色获取(getImageData)可能失败。
- 颜色在 sRGB 色彩空间中取得。广色域(如 Display P3)图片会显示转换为 sRGB 后的值。
- 放大镜中显示的颜色可能与整图视觉颜色略有不同(受相邻像素影响)。
- 本工具按像素取色。与 AI「全图代表色提取」的目标不同。
常见问题
图片会被上传至服务器吗?
不会。颜色提取处理全部在您的浏览器内完成。即使是公司内部设计素材或个人照片也可放心使用。
输入图片 URL 后取不到颜色。
若图片宿主未允许 CORS(跨源访问),按浏览器规范无法取得颜色。请将图片下载到本地后从上传方式重试。
HEX / RGB / HSL 有什么区别?
HEX 是 #RRGGBB 的 16 进制表示,RGB 以 0~255 表示红、绿、蓝的强度,HSL 以色相、饱和度、明度三要素表示。CSS 中 HEX 与 RGB 广泛使用,HSL 适合以色相为中心做微调的设计。本工具可一键切换同一颜色的 3 种表示。
看不到「从屏幕拾取颜色」。
仅在支持 EyeDropper API 的 Chrome 系浏览器(Google Chrome / Microsoft Edge / Brave 等)中显示。Firefox 与 Safari 不支持,请使用上传图片的方式。
可以将取得的颜色带入 Figma / Sketch / Photoshop 吗?
将 HEX 直接复制即可粘贴到几乎所有设计工具。需要一并带入多种颜色时,请通过「复制 JSON」「复制 CSS 变量」导出的字符串,使用对应插件或导入功能取入。