- 完全免费
- 无需注册
- 不上传
图片提取配色
从照片、截图或画作里提取主要颜色，查看 HEX、RGB、HSL 色值，直接复制到设计稿或代码里。
文件只在当前浏览器标签页里处理，不会离开你的设备。
使用场景
什么时候需要从图片里提取颜色
按品牌主图定网站配色
网页设计师、前端开发客户发来一张首页大图，希望网站整体颜色和这张图一致。
得到按占比排序的色板，以 CSS 变量或 Tailwind 颜色的形式直接粘进代码。
准确还原品牌色
市场、新媒体运营要做公众号封面或小红书图，需要标志或包装上的准确色值，可手里只有一张截图。
用吸管点一下，就能拿到那个像素的 HEX。
给家装或穿搭找配色
装修、穿搭爱好者很喜欢一张房间、风景或画作照片里的颜色，想用到自己的装修或衣服搭配上。
存一张色卡，拿去油漆店或布料店对色。
让 PPT 和图表配色统一
学生、做汇报的人PPT 封面用了一张照片，希望图表和标题的颜色都和它搭。
拿到 HEX 色值，直接填进 PowerPoint、WPS 或图表工具里。
提取后的效果
示例里，一张海边日落插画被提取成一排色块，按颜色占画面面积从大到小排列。
| 你的图片 | 提取出的配色 | |
|---|---|---|
| 颜色 | 成千上万种混在一起 | 3～12 个主色，按占比排序 |
| 色值 | 无 | 每个色块都有 HEX、RGB、HSL 和占比 |
| 某一处的准确颜色 | 很难看出来 | 点击图片即可取色 |
| 导出 | 只有图片 | CSS 变量、Tailwind、JSON 或 PNG 色卡 |
一张好看的照片本身就带着一套配色。把它提取出来，就能得到和品牌照片、商品、情绪板或一幅画相匹配的色板，不用再凭感觉去猜颜色。
颜色数量可选 3 到 12 个。工具用 k-means 聚类把相近的像素归为一类，并按每种颜色在图片中的占比排序。每个色块都会显示 HEX、RGB、HSL 和占比，点一下色块即可复制 HEX。想要某一处的准确颜色，直接点击图片上的那个位置，就像用吸管工具取色。
色板可以复制成 CSS 变量、Tailwind 颜色配置或 JSON，也可以下载成一张 PNG 色卡，发给同事或存进素材库。图片在浏览器里分析，不会上传。
使用方法
- 1
添加图片
把照片、截图或画作拖进框里，或点击选择。
- 2
设置颜色数量
选择 3～12 个颜色。点色块复制 HEX，或点击图片取某个像素的颜色。
- 3
导出配色
复制为 CSS 变量、Tailwind 颜色或 JSON，或下载 PNG 色卡。
想让 AI 帮你做更多？
喜欢这套配色？
描述一个画面，GPT Image 2 用这套配色生成新图片，做封面、海报、情绪板都行。
常见问题
工具是怎么决定显示哪些颜色的？
它用 k-means 聚类把相近的像素归成你设定的颜色数量，再按每种颜色占画面的比例排序。面积很小的点缀色可能不会出现，可以调高颜色数量，或者用吸管直接取。
能取图片上某一个点的颜色吗？
可以。点击图片上任意位置，工具会读取那个像素的颜色，显示 HEX、RGB 和 HSL。
怎么在 Tailwind CSS 里用这套配色？
点「复制为 Tailwind」，把 colors 对象粘贴到 Tailwind 配置的 theme 部分即可。普通 CSS 项目用 CSS 变量，用法一样。
图片会上传吗？
不会。颜色在你的浏览器里计算，图片一直留在你的设备上。
为什么改了颜色数量，颜色会有点变化？
每换一个数量，像素都会重新分组，色调就会略有偏移。选一个和你肉眼感受最接近的数量，再复制需要的色值。