图片色板生成器

选择您喜欢的照片或绘画。页面会按所占比例从大到小列出它的主要颜色,您可以复制色码,或取走整套色板。

免费 在浏览器中运行 核对于2026年11月10日星期二

此工具在您的浏览器中运行。您输入的内容不会发送给我们。

使用方法

  1. 点击 选择照片,或把图片拖到方框中。照片在您的设备上读取。
  2. 选择 颜色数,从5到10。画面复杂的照片需要更多颜色。
  3. 读取每种颜色:它的十六进制色码、RGB 和 HSL 数值,以及在画面中所占的比例。点击颜色旁的复制按钮,即可复制它的十六进制色码。
  4. 在 导出色板 下,使用 复制为 CSS 变量、复制为列表 或 下载色块(PNG)。

颜色如何找出

每个像素都被转换为 CIE L*a*b*。在这一颜色空间中,两种颜色之间的距离与人眼感觉到的差异相近。随后,像素通过 k-means 聚类归入您所选的颜色数:算法安排每一组的中心,使像素尽可能靠近其中心。

初始中心采用 k-means++ 方法选取,并使用固定的随机种子,因此同一张照片总能得到同一套色板。每种颜色是其组内像素的平均值,其比例等于该组像素数除以全部像素数。

像素 → (L*, a*, b*)
分组:每个像素归入最近的中心;中心为组内像素的平均值
颜色 = 组内的平均 RGB;比例 = 组内像素数 ÷ 全部像素数
  • 照片以不超过约200万像素的副本进行分析,这使大照片也能快速处理。
  • 非常相近的色调可能被合并为一种颜色。当照片中同一颜色有许多色调时,10种颜色的色板可能把一种颜色拆成两种。

色码、比例及其含义

十六进制色码是把颜色写成红、绿、蓝三组十六进制数字;RGB 数值则是同样的数字的十进制形式。HSL 以色环上的角度表示色相(0为红,120为绿,240为蓝),以饱和度表示颜色的强弱,以明度表示颜色的明暗。

比例是画面中属于某种颜色的像素所占的份额,即它所覆盖的面积。一个小而亮的光点可能是比例很小的颜色,而一大片柔和的背景则可能由几种相近的色调组成一个较大的比例。

  • 复制 CSS 变量后,可在网页或设计中使用这些颜色:每种颜色变为 --color-1、--color-2等。
  • PNG 色条适用于情绪板或打印:每种颜色一个色块,色块下方标注十六进制色码。

计算示例:红、蓝、绿三个色块

一张测试图片含50个红色、30个蓝色和20个绿色像素,恰好得到三种颜色,因为每个色块都是单一的纯色。即使要求六种颜色,工具也只返回这三种,不会凭空添加颜色。

列表按比例从大到小排列,每个色码都是其色块的精确颜色。

颜色 十六进制 RGB HSL 比例
红 #FF0000 rgb(255, 0, 0) hsl(0, 100%, 50%) 50.0%
蓝 #0000FF rgb(0, 0, 255) hsl(240, 100%, 50%) 30.0%
绿 #00FF00 rgb(0, 255, 0) hsl(120, 100%, 50%) 20.0%

常见问题

这些颜色与照片完全一致吗?

平涂的区域会得到它的精确颜色。有渐变的照片则会得到每一组的平均色,这能较好地概括画面,但不一定包括其中的每一种色调。

为什么每次得到的色板都相同?

聚类从固定的随机种子开始,因此同一张照片和同样的颜色数总会得到同样的色板。更换照片或颜色数,结果就会改变。

应该选择多少种颜色?

五种颜色即可概括大多数照片的主要基调。画面复杂,或绘画和设计需要更多色调时,可以选用8至10种。

我的照片会被上传到什么地方吗?

不会。照片由您的浏览器读取,色板在您自己的设备上算出,任何内容都不会发送给我们,全部过程都在本地完成。

十六进制、RGB 和 HSL 有什么区别?

它们以三种方式描述同一种颜色:十六进制和 RGB 列出红、绿、蓝的分量,前者用十六进制,后者用十进制。HSL 描述色相、饱和度和明度,更便于凭眼睛调整。

资料来源

数据和文字最近核对于2026年11月10日星期二。

我们使用必要的 Cookie 来运行网站。经您同意后,Google 还会使用广告 Cookie 展示个性化广告。如果您拒绝,仍会看到广告,但广告不会个性化。