🎨 图片调色板提取

从图片提取 5 / 10 / 16 种主要颜色。支持 HEX、RGB、HSL 和 CSS 变量。

完全免费无需注册浏览器内完成 5 种语言深色模式

🔒 关于隐私

・所有处理均在浏览器中进行
・图片数据绝不会发送到任何服务器
・无存储日志、无历史、无数据库

🎨

拖放、点击或粘贴图片

📖 常见的坑

从图片中提取 5 / 10 / 16 种主要颜色，并以 HEX、RGB、HSL 显示。处理全部在浏览器内完成，图片不会被上传。提取出的是「占面积最多的颜色」，而非「设计上重要的颜色」：照片中天空或墙面会占据前列，即使是徽标，留白通常也最多。想取品牌色时，请带着这个前提解读结果。

情形	会发生什么	怎么处理
结果全是相近的颜色	JPEG 的压缩噪点、照片中的渐变、抗锯齿边缘，都会使肉眼看作单一颜色的区域，在数据上由数百种细微不同的颜色构成。若只按出现频率排序，榜首便被同一色系填满。天空、皮肤这类大面积渐变尤其明显。	请减少提取的颜色数量。5 色比 16 色更能得到协调的配色。若用途是设计，其中真正会用的只有 2~3 色，其余只作氛围参考。从图片侧入手，可先用图片缩放缩小后再提取，细碎噪点会被平均掉，主色更容易被识别。
直接把提取色用于 UI 会导致读不清	从照片中取的颜色明度并不统一。若打算做背景的颜色处于中等明度，白字黑字的对比度都不够。WCAG 要求正文对比度 4.5:1、大号文字 3:1，而直接从照片取的颜色很少能达标。	请把提取的颜色当作色相的提示，明度与饱和度由你自己决定。用颜色码转换转成 HSL，保留 `H` 并调整 `L`，即可得到统一的色阶（背景 95%、边框 80%、文字 30% 等）。组合确定后，务必测量对比度再采用。
同一张图每次结果都不同	主色提取通常使用 k-means 这类以随机值作为初值的算法，因此每次运行结果都会略有不同。这不是缺陷，而是算法的性质；请求的颜色数越多、颜色分布越平缓，波动就越大。	得到满意的结果后，请记下 HEX 并固定下来。把它作为设计令牌写进 CSS 变量，此后就无需再次提取。反之，若要在程序中实现每次结果一致的处理（例如自动生成缩略图背景色），请选择「把色彩空间划分为网格、取最密集单元」的方法而非 k-means——它是确定性的，相同输入必然得到相同颜色。

把提取出的颜色排成一行，还算不上配色方案。真正需要的是一个主色、由它衍生的明度色阶，以及一个用于对比的强调色。颜色越多，画面越不协调。另外，暗色模式并非把亮色模式反转：惯例是降低饱和度、再重新提高明度——在浅背景上出彩的鲜艳颜色，在深背景上会刺眼且难以阅读。请把提取结果当作构建这套色阶的起点。

📖 使用方法

1

加载图片

拖放、点击或粘贴。
2

选择颜色数

选择 5/10/16 色和 HEX/RGB/HSL。
3

提取并复制

点击色块或批量复制 CSS 变量。

❓ 常见问题

使用什么算法?

使用 Median Cut 算法,比 k-means 更快更稳定。

图片会上传吗?

不会。使用 Canvas API 完全在浏览器中。

透明 PNG 如何处理?

完全透明像素被忽略,半透明照常使用。

🔗 相关工具

🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。