图片配色提取器

拖入一张图片即可提取它的主色和完整配色——把每个色块复制为 HEX、RGB 或 HSL，或导出 CSS 变量和 Tailwind 颜色。它绝不会离开你的浏览器。

图片配色提取器完全在你的浏览器中解码你的图片并分析其颜色。图片绝不会被上传——没有任何图像数据或提取出的颜色会发送到 ArrayKit。

打开图片取色器

关于 图片配色提取器

图片配色提取器会把任意一张图片变成一套可用的配色方案。拖入或选择一张照片、logo、截图或设计稿，它就会呈现出单一的主色，以及一套贯穿整张图片、最突出的色调组成的配色。每个色块都以 HEX、RGB 和 HSL 显示，因此你可以把一个值直接搬进 CSS、一个设计令牌或油漆桶。把配色数量从四种到十二种进行调节，复制单个色块或一次性复制所有 HEX 代码，或获取一个现成的 CSS :root 变量块和一段用于你主题的 Tailwind 颜色片段。它专为设计师、前端开发者，以及任何要从图片匹配品牌配色的人而打造。图片会在你的设备上被解码、其颜色被读取——不上传任何内容。

功能特性

如何使用 图片配色提取器

  1. 点击拖放区，或把一个图片文件拖到上面
  2. 查看主色和提取出的配色色块
  3. 在 HEX、RGB 和 HSL 之间切换色块，或更改配色数量
  4. 复制单个色块、所有 HEX 代码，或 CSS 或 Tailwind 块

示例

输入

Uploaded: brand-hero.png (blue / green / red artwork)

输出

:root {
  --color-1: #2563eb;
  --color-2: #10b981;
  --color-3: #ef4444;
}

一套三色配色会变成一个可直接复制的 CSS 变量块。

常见错误与故障排除

常见问题

我可以从一张图片中提取多少种颜色？
你可以把四到十二种颜色纳入配色，另外还有单独显示的单一主色。随时更改配色数量，色块、CSS 变量和 Tailwind 块都会即时更新。
主色和配色有什么区别？
主色是整张图片中最具代表性的那一种颜色，会连同它的 HEX、RGB 和 HSL 一起显示。配色则是一组贯穿整张图片、最突出的颜色，按它们的突出程度排序。
我可以把配色导出为 CSS 变量或 Tailwind 颜色吗？
可以。工具会生成一个包含 --color-N 自定义属性的 :root 块，以及一个以 palette-1、palette-2 等为键的 Tailwind 颜色对象。一键复制其中任一个，粘贴进你的项目即可。
我可以从哪些图片格式中提取配色？
PNG、JPEG、WebP、SVG、GIF、AVIF、BMP 和 ICO 都可以。拖入或选择文件，配色就会在你的浏览器中从解码后的像素生成。
我该如何构建一套匹配我品牌的配色？
上传你的 logo、一张产品照片或你网站的截图。提取器会呈现最突出的颜色，让你锁定品牌 HEX 值，然后把它们导出为 CSS 变量或 Tailwind 令牌。
为什么我的两个色块几乎一模一样？
以单一色相为主的图片会产生几种相近的色调。请减少配色数量以将它们合并，或选择一张色彩更丰富的图片以获得更广的分布。

相关工具

全部 ArrayKit 工具