使用方法
- 点击 选择照片,或把图片拖到方框中。照片在您的设备上读取。
- 选择 颜色数,从5到10。画面复杂的照片需要更多颜色。
- 读取每种颜色:它的十六进制色码、RGB 和 HSL 数值,以及在画面中所占的比例。点击颜色旁的复制按钮,即可复制它的十六进制色码。
- 在 导出色板 下,使用 复制为 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 描述色相、饱和度和明度,更便于凭眼睛调整。
资料来源
- Wikipedia:K-means++(英文),Arthur 与 Vassilvitskii(2007)的 k-means 谨慎初始化
- Wikipedia:CIELAB colour space(英文),L*a*b*,D65白点
数据和文字最近核对于2026年11月10日星期二。