免费工具
图片取色器 — 获取照片里的 HEX 和 RGB
从图像中选取像素的精确颜色,并提取调色板。
在任意位置点击取色
工具功能
想从图片里取色?上传任意照片,点任意像素,立刻读出它的精确颜色——HEX 码与 RGB 值。免费使用,且全程在浏览器本地运行,不上传文件。这是从图片中抓取精准颜色的最快方式。
想知道一张图的大致色彩氛围而不是单个像素?工具会自动从你的照片中提取主色调调色板,让你一眼看到主要颜色,并应用到设计、品牌手册、演示或情绪板中。无论是把网站配色对齐到 Logo、用一张最爱的照片做配色,还是单纯想知道这张图为何“这种感觉”,都很合适。
每个颜色码都可一键复制到剪贴板。点选像素即可取色,也可直接点选调色板里的色块,把 HEX 或 RGB 值复制后,贴进你的设计软件、CSS、文档或聊天窗口。无需手打长串颜色码,也不怕抄错。
由于一切 100% 在浏览器中完成,图片不会离开你的设备,也不会上传到服务器。你可以放心地从私密照片、客户稿件、未发布的设计中取色,文件始终留在你的电脑上。无论你是设计师、开发者、营销同学,还是只是钟爱某张照片里的一抹色,这个取色器都能无摩擦、无隐私顾虑地给出你所需的精确数值。
取色器是否好用,取决于你要用它来做什么。两类常见需求刚好相反:匹配品牌色时,你需要的是“不经平均”的精确像素值,且应来自纯色区域,而不是渐变或 JPEG 伪影;而做配色方案时,你更需要整张图片的主色调,所以提取出的调色板会把相近色归类,而不是把文件里每个独立的像素值都罗列出来。
从照片里读色有个实用提醒:屏幕上你看到的颜色,已经经过了相机白平衡、文件色彩配置文件,以及你自己显示器的校准。做一般设计这没问题。但凡需要实体再现——印刷、涂料、面料——请把 HEX 值当作接近的起点而非硬性规范,并务必对照实物样品确认。
使用方法
如何从图片中取色
- 01
上传图片
把照片拖入或选择导入。它会在浏览器中本地打开,不会上传到任何服务器。
- 02
点击像素取色
在图片上任意位置点击,即可读出该像素的精确颜色(HEX 与 RGB)。
- 03
查看主色调
查看自动提取的调色板,了解照片中的主要颜色。
- 04
复制颜色码
点击 HEX 或 RGB 值,一键复制到剪贴板。
- 05
用到你的项目里
把颜色直接粘贴进你的设计工具、CSS 或文档。
给 AI 照片创作者
颜色决定画面的情绪。你可以从参考图里采到理想的色,也可以围绕这种色调直接生成一张全新的图片。
LaFoto 正在打造一款 AI 照片生成器,让你的视觉想法用一句话就能落成图。上线时,生成原创照片将支持免费起步。
常见问题
- 这个图片取色器免费吗?
- 是的。取色与提取调色板完全免费,并可直接在浏览器中运行。
- 会同时给出 HEX 和 RGB 吗?
- 会。点击像素即可看到该颜色的 HEX 码与 RGB 值,你可以一键复制任意一种。
- 什么是主色调调色板?
- 它是从你的照片中自动提取的一组主要颜色,让你无需逐像素点击也能快速理解整体配色。
- 能否快速复制颜色码?
- 可以。所有颜色码都支持一键复制到剪贴板,随时粘贴。
- 我的图片会被上传吗?
- 不会。取色器 100% 在浏览器内运行,图片不会离开你的设备,也不会被上传。
- 支持哪些图片格式?
- 你可以加载常见图片格式,如 PNG、JPG,并从任意像素取色。
取色器一览
- 运行环境
- 你的浏览器 — 不上传任何内容
- 账户
- 不需要
- 费用
- 免费,无水印
- 离线可用
- 页面加载完成后
- 格式
- JPEG, PNG, WebP
- 文件上限
- 受设备内存限制,不受配额限制
从照片读取颜色
从照片取到的 HEX 值真正代表什么
你采样到的数值已经经历了多个变换:相机白平衡、文件的色彩配置文件、以及你自己显示器的校准。它精准反映的是你屏幕此刻的显示,而不完全等同于实物本身。
做屏幕用途时,这一点通常无关紧要——同一个文件对你的访客看起来也会一样。凡是要做实体复制(印刷、涂料、织物)的,拿到的数值只是接近的起点,需与实物样品核对。

三类取色工作
你要取色是为了什么?
把一个数值拿准
从该颜色最大的纯色区取样。边缘带有混合两色的抗锯齿,且 JPEG 会以更低分辨率存储色度,两者都会让结果“接近但不对”。
如果来源是网站上的 logo,权威数值在它的 CSS 或品牌手册里,而不是对它的截图。
- 从纯色内部采样,不要在边缘。
- JPEG 的色度抽样会让边界附近颜色偏移。
- 优先采用品牌发布的标准值,而非采样值。

从图片里推导出方案
你喜欢的一张照片本身就带着一致的配色,因为让它成像的是同样的光。提取主色是一种不靠拍脑袋学色彩理论,也能快速得到好用方案的方法。
有效的结构是三个角色,而不是五个平权色块:覆盖面最大的主色、承担结构的副色,以及少量使用的点缀色。
- 给颜色分配角色——主色、副色、点缀色。
- 点缀色之所以有效是因为稀缺,不是因为更亮。
- 用于文字前,先测试成对颜色的对比度。

确保文字可读
分别采样文字颜色及其底色,得到对比度计算所需的两组值。WCAG 对正文字要求至少 4.5:1,对大字号文字要求 3:1。
在明亮房间里校准良好的显示器上看着没问题的颜色,放到户外手机上可能表现很糟——而大多数人会在那样的环境里阅读。
- 正文 4.5:1,大字 3:1。
- 采样实际背景,而不是你设想的背景。
- 检查最差情况,而不是平均情况。

颜色问答
取色器能处理什么
实际场景,以及取样颜色不再可靠的边界。
在设计工具里颜色看着不一样
几乎都是色彩配置文件不一致。同样的 RGB 数值在 sRGB 与 Display P3 下渲染会不同,截图常常还会丢失配置文件。
从网站截图里取样
可行,但截图可能被二次压缩。若要品牌色,从站点 CSS 里取值更权威。
要做印刷用的颜色
屏幕是加色光,印刷是减色墨;有些屏幕颜色无法印出来。把取样值当作给印刷厂的需求说明,而不是最终规格。
从一张很暗的照片提取配色
低调照片会返回几块技术上“占主导”的近黑色卡,但几乎没用。请改为有意识地从受光区域取样。
要在两张照片间匹配颜色
若拍摄光源不同,没有一个数值能同时匹配。先做白平衡校正——AI 照片增强就用于此。

从颜色到图像
把一套配色用起来
在 prompt 里直接点名颜色,是最可靠的控制手段。