免费图片工具

图片取色器 - 从图片中提取 HEX、RGB 和调色板

选择本地图片或加载示例图并点击取色，快速获得 HEX、RGB、HSL、调色板和 CSS 变量，适合设计稿、品牌配色、网页配色和图片色彩分析。

英文版返回中文工具库

可以开始使用

浏览器本地 · 无需账号 · 结果留在当前页面

使用工具

免费工具仅浏览器内取色

图片取色器

选择本地图片、点击像素，并复制 HEX、RGB 或 HSL 值。

拖放图片到这里，或点击选择本地文件

支持 JPG、PNG、WEBP 或 GIF，最大 10 MiB。

尚未选择图片

选取的颜色

点击图片预览即可采样另一个像素。

选择本地图片以取色。

提取的调色板

这个工具按当前公开实现使用浏览器 canvas 采样图片。除非你已经检查实现，否则请避免输入敏感图片。

快速答案

图片取色器可以从图片像素中读取颜色值，并提取一组近似调色板。

它适合从截图、Logo、产品图和参考图中复制 HEX、RGB、HSL 或 CSS 变量。

适合输入

目标像素

选择清晰的截图或图片，点击要读取的位置。边缘抗锯齿和半透明像素的颜色可能不同。

颜色值用途

复制 HEX 或 RGB 后在目标页面预览；单点取色不等于提取品牌色，也不代表整张图的平均色。

取色方式

工具会在浏览器中读取图片像素，并把选中位置转换成常见颜色格式。

点击图片即可读取颜色，也可以先加载示例图测试。

可复制 HEX、RGB、HSL、调色板或 CSS 变量。

图片处理设计为在浏览器中完成。

示例、假设和限制

这些示例用于比较图片选中像素的 HEX、RGB、HSL 和近似调色板；请以实际取色结果为准。

示例

选择一张本地品牌图，点击主色区域得到 #10b981 这类颜色值。

假设

用户需要的是图片中某个点的颜色，而不是完整调色板分析。

限制

压缩、滤镜、色彩配置和屏幕显示可能让取色结果与原始设计文件略有差异，调色板也只是近似提取。

使用前检查

开始处理前先确认这些事项，能减少复制错误、格式偏差和结果误读。

使用清晰原图

压缩图、滤镜图和截图会改变像素颜色，取品牌色或 UI 色时尽量使用源图。

多取几个参考点

照片和渐变区域每个像素都可能不同，取色时可以选高光、阴影和主体色分别记录。

取色后统一格式

复制到 CSS、Figma 或文档前，建议再用颜色转换工具统一成目标格式。

实用细节

这些补充说明更偏真实使用决策，帮助你判断参数、边界和下一步处理方式。

适合从素材反推配色

产品图、封面、截图和品牌图里常有现成色彩，取色后可以形成页面或卡片配色。

截图色值可能不稳定

浏览器抗锯齿、压缩、滤镜和缩放都会改变像素，重要品牌色应回到源文件或规范。

和色板工具形成闭环

先从图片取主色，再生成辅助色、背景色和边框色，最后检查文字可读性。

常见使用场景

这些中文页面面向轻量、快速、浏览器本地完成的日常任务。

品牌配色

从 Logo 或参考图中提取颜色。

网页设计

把图片色值复制到 CSS。

截图分析

确认界面元素颜色。

素材整理

记录图片里的常用色。

常见问题

图片会上传吗？

不会。取色在浏览器本地完成。

支持 HEX 吗？

支持，页面会输出 HEX、RGB 和 HSL 等常用颜色格式。

能复制整组调色板吗？

可以。页面可以复制调色板 HEX 列表，也可以复制成 CSS 变量。

可以不选本地图片先试用吗？

可以。你可以加载示例图片来测试取色、调色板和复制功能。

为什么颜色和设计稿不完全一样？

图片压缩、色彩配置和截图来源都可能造成差异。

为什么同一张图取到的颜色不一样？

照片、渐变和抗锯齿区域每个像素都可能不同，点击位置不同就会得到不同色值。

取色结果适合直接当品牌色吗？

不一定。图片可能经过压缩、滤镜或光影处理，品牌色最好以官方规范或源文件为准。

推荐流程

图片配色流程

先在图片中点击目标像素并复制颜色值。下方仅列出已公开的相关步骤；需要检查文字对比度时，在目标界面另行验证前景色与背景色。