图片配色提取
Palette Extractor
从图片里提取 N 种代表色,导出为 HEX、CSS 变量或 ASE 色板。
一张图里的颜色,做成能粘进样式表的配色板。量化器就是 PNG 压缩用的那一个,理由是:一个足以表示这张图的调色板,按定义就是描述它的调色板——而每种颜色覆盖图片的占比是数出来的,不是估的。
把图片放到这里
调色板来自 PNG 压缩用的同一个量化器 —— 一份足以表现这张图的调色板,本身就是对它的描述。
怎么用
拖入一张图
预览下面的条按实际占比显示每种颜色,所以覆盖画面 2% 的颜色看起来就是 2%。
设你要多少种颜色
两到十六种。五六种通常是配色板从概括变成罗列的分界点。
按你需要的形式导出
CSS 自定义属性、Tailwind @theme 块、SCSS 变量或 JSON——整个复制,而不是一次一个色块。
常见问题
为什么一种我明明看得见的颜色不在配色板里?
因为它覆盖的面积太小。量化器优化的是表示整张图,所以画面 1% 上的一抹亮色输给了一大片几乎一样的灰。提高颜色数。
它采样的是整张图吗?
对整张图均匀跨步采样,约 400,000 个像素。主色是分布的属性,所以跨步能保住它们——而且和先缩小不同,它不可能造出图里没有的颜色。
Tailwind 输出在我的项目里不管用。
Tailwind 4 把颜色定义为 @theme 里的自定义属性,这里输出的就是它。v3 风格的 module.exports 配置粘进 v4 项目会不声不响地什么都不做,反过来也一样。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色,并给出最接近的已知色名。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分,并推荐最接近的能通过的颜色。
图片主色提取
Average & Dominant Colour
取图片的平均色、中位色或出现最多的颜色作为代表色输出。
配色方案生成
Palette Generator
从一个基准色出发,按互补、三分和邻近色规则生成协调的配色。
图片抠图去背景
Background Remover
在 OKLab 色彩空间中抠掉纯色或均匀背景,输出透明 PNG,并可用画笔修补边缘。
EXIF 信息清除
EXIF Remover
删掉照片里的相机、GPS 和编辑记录等元数据,像素本身分毫不动。