跳到正文

图片配色提取

Palette Extractor

从图片里提取 N 种代表色,导出为 HEX、CSS 变量或 ASE 色板。

一张图里的颜色,做成能粘进样式表的配色板。量化器就是 PNG 压缩用的那一个,理由是:一个足以表示这张图的调色板,按定义就是描述它的调色板——而每种颜色覆盖图片的占比是数出来的,不是估的。

🔒 完全在你的浏览器里运行colorpaletteextractdesign

把图片放到这里

调色板来自 PNG 压缩用的同一个量化器 —— 一份足以表现这张图的调色板,本身就是对它的描述。

怎么用

  1. 拖入一张图

    预览下面的条按实际占比显示每种颜色,所以覆盖画面 2% 的颜色看起来就是 2%。

  2. 设你要多少种颜色

    两到十六种。五六种通常是配色板从概括变成罗列的分界点。

  3. 按你需要的形式导出

    CSS 自定义属性、Tailwind @theme 块、SCSS 变量或 JSON——整个复制,而不是一次一个色块。

常见问题

为什么一种我明明看得见的颜色不在配色板里?

因为它覆盖的面积太小。量化器优化的是表示整张图,所以画面 1% 上的一抹亮色输给了一大片几乎一样的灰。提高颜色数。

它采样的是整张图吗?

对整张图均匀跨步采样,约 400,000 个像素。主色是分布的属性,所以跨步能保住它们——而且和先缩小不同,它不可能造出图里没有的颜色。

Tailwind 输出在我的项目里不管用。

Tailwind 4 把颜色定义为 @theme 里的自定义属性,这里输出的就是它。v3 风格的 module.exports 配置粘进 v4 项目会不声不响地什么都不做,反过来也一样。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。