可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
拖放图片到这里，或点击上传
支持 JPG、PNG、WEBP 或 GIF，最大 10MB。
这个工具按当前公开实现使用浏览器 canvas 采样图片。除非你已经检查实现，否则请避免输入敏感图片。
图片取色器可以从图片像素中读取颜色值，并提取一组近似调色板。
它适合从截图、Logo、产品图和参考图中复制 HEX、RGB、HSL 或 CSS 变量。
清晰输入
准备好要处理的需要提取颜色的图片，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
上传一张品牌图，点击主色区域得到 #10b981 这类颜色值。
假设
用户需要的是图片中某个点的颜色，而不是完整调色板分析。
限制
压缩、滤镜、色彩配置和屏幕显示可能让取色结果与原始设计文件略有差异，调色板也只是近似提取。
使用清晰原图
压缩图、滤镜图和截图会改变像素颜色，取品牌色或 UI 色时尽量使用源图。
多取几个参考点
照片和渐变区域每个像素都可能不同，取色时可以选高光、阴影和主体色分别记录。
取色后统一格式
复制到 CSS、Figma 或文档前，建议再用颜色转换工具统一成目标格式。
适合从素材反推配色
产品图、封面、截图和品牌图里常有现成色彩，取色后可以形成页面或卡片配色。
截图色值可能不稳定
浏览器抗锯齿、压缩、滤镜和缩放都会改变像素，重要品牌色应回到源文件或规范。
和色板工具形成闭环
先从图片取主色，再生成辅助色、背景色和边框色，最后检查文字可读性。
品牌配色
从 Logo 或参考图中提取颜色。
网页设计
把图片色值复制到 CSS。
截图分析
确认界面元素颜色。
素材整理
记录图片里的常用色。
图片会上传吗？
不会。取色在浏览器本地完成。
支持 HEX 吗？
支持，页面会输出 HEX、RGB 和 HSL 等常用颜色格式。
能复制整组调色板吗？
可以。页面可以复制调色板 HEX 列表，也可以复制成 CSS 变量。
可以不上传图片先试用吗？
可以。你可以加载示例图片来测试取色、调色板和复制功能。
为什么颜色和设计稿不完全一样？
图片压缩、色彩配置和截图来源都可能造成差异。
为什么同一张图取到的颜色不一样？
照片、渐变和抗锯齿区域每个像素都可能不同，点击位置不同就会得到不同色值。
取色结果适合直接当品牌色吗？
不一定。图片可能经过压缩、滤镜或光影处理，品牌色最好以官方规范或源文件为准。
图片会上传吗？
不会。取色在浏览器本地完成。
支持 HEX 吗？
支持，页面会输出 HEX、RGB 和 HSL 等常用颜色格式。
能复制整组调色板吗？
可以。页面可以复制调色板 HEX 列表，也可以复制成 CSS 变量。
可以不上传图片先试用吗？
可以。你可以加载示例图片来测试取色、调色板和复制功能。
为什么颜色和设计稿不完全一样？
图片压缩、色彩配置和截图来源都可能造成差异。
为什么同一张图取到的颜色不一样？
照片、渐变和抗锯齿区域每个像素都可能不同，点击位置不同就会得到不同色值。
取色结果适合直接当品牌色吗？
不一定。图片可能经过压缩、滤镜或光影处理，品牌色最好以官方规范或源文件为准。
推荐流程
图片配色流程
先从图片取色，再转换格式和检查对比度。