免费图片调色板提取器
使用 K 均值色彩量化从任意图片中提取主色调。获取照片或 Logo 中前 2–16 种颜色的十六进制色值。
将文件拖放到此处，或点击浏览
JPG, PNG, WebP, GIF, HEIC, HEIF · 在你的设备上处理
或按 Ctrl+V 从剪贴板粘贴
提示：可以用 Ctrl+V 粘贴截图
你的文件永远不会离开你的设备。所有处理都在你的浏览器中本地进行。
常见用途
- 从徽标中提取品牌颜色获取任何徽标或品牌图像中主色的确切十六进制代码。
- 从照片构建网络调色板从hero照片或背景图像生成匹配的网站调色板。
- 从灵感照片中提取颜色从室内设计或时尚照片中提取调色板，在您自己的项目中使用。
- 分析绘画和艺术品调色板通过提取主色来研究名画或您自己的艺术作品的调色板。
- 从图像生成CSS主题从图像生成CSS变量主题——对于动态主题或自动生成的颜色方案很有用。
工作原理
颜色提取完全在你的浏览器中运行，对从 Canvas API 读取的原始像素数据应用手写的 k-means++ 聚类算法——没有服务器、没有第三方库。由于算法使用确定性伪随机数生成器（mulberry32）而非 Math.random，相同的图片和颜色数量设置总是得到相同的调色板。
- 1Canvas 读取像素数据图片被绘制到离屏 HTML Canvas 元素上，并将最长边缩小到最多 200px。Canvas API 的 getImageData() 以原始 RGBA 字节返回每个像素，完全透明的像素（alpha < 128）会在聚类开始前被丢弃。
- 2k-means++ 对像素聚类k-means++ 初始化器确定性地选取质心，然后算法最多迭代 20 次：每个像素分配到 RGB 空间中最近的质心，再将质心重新计算为所有分配像素的平均值。收敛到相同十六进制值的簇会被合并，因此结果中的每个色块都是唯一的。
- 3计算每种颜色的元数据每个质心都会转换为 HEX、HSL 及其占总像素的比例（百分比）。按标准公式计算 WCAG 相对亮度，并在每个色块旁显示与黑色和白色的对比度。
- 4导出与取色器调色板可以复制为 CSS 自定义属性、SCSS 变量、Tailwind 配置片段或 JSON。点击取样的取色器会把你在预览上的点击映射回全分辨率画布上的准确源像素坐标，并将该像素的颜色添加到单独的已选颜色列表中。还可以通过 Canvas toBlob() 下载 PNG 色条。
你的图片绝不会上传——它完全在浏览器内存中解码和处理，只有文件大小（以 KB 计）会报告给统计服务。
指南
操作示例
点按拖放区下方的“尝试示例”。文件标签显示 sample-image.png，滑块显示“颜色数量（6）”。示例是青绿、天蓝和紫罗兰色的渐变，带有一排粉彩圆圈和 LibraTool 字样，所以大多数色块是蓝色。在我们的测试中，列表以占 38.5% 的 #189AE3、占 28.7% 的 #0D9CB6 和占 26.1% 的 #4C69EB 开头，后面是三个较小的，分别为 3.1%、2.2% 和 1.4%。第一个色块显示 rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5%，它的对比度行给出黑色文本 6.8:1、白色文本 3.1:1。把滑块拖到 2，会得到占 92.9% 的 #238DD7 和占 7.1% 的 #ADC0CA。回到 6，在“导出为”下选择 CSS，点按“复制代码”，会得到以 --color-1: #189ae3 开头的 :root 代码块。“下载 PNG 色条”会保存 sample-image_palette.png。您得到的十六进制色值可能会有几级差别，因为各浏览器绘制示例中文字的方式略有不同。
使用哪些设置，以及限制
- 用最快的方式添加图片。 把文件拖到拖放区，点按“浏览文件”，或用 Ctrl+V 粘贴截图。在触摸屏上，拖放和粘贴的提示会隐藏，“浏览文件”是唯一入口。支持 JPEG、PNG、WebP 和 GIF，iPhone 的 HEIC 照片会先被转换，并显示“正在转换你的 iPhone 照片…”。“或粘贴文件URL”会从某个地址获取图片，只有该网站允许时才有效。在图片已打开时再次粘贴会替换它。“尝试示例”会加载一张 1200 × 800 的测试图片。
- 用滑块设置“颜色数量”。 滑块范围为 2 到 16，默认 6，标签会显示数量，例如“颜色数量（6）”。数量少时得到的是宏观的调色板，数量多时会捕捉到细小的点缀色。您看到的色块可能比滑块上的数量少，因为取整后十六进制相同的颜色会被合并，空的分组会被丢弃。同一张图片和同样的数量总是得到相同的调色板，因为搜索从固定的种子开始。每个色块显示它在图片中的占比，例如 38.5%，占比最大的排在最前面。
- 记住色块是平均值。 图片会缩小到最长边不超过 200 px，大部分透明的像素（alpha 低于 128）会被忽略，其余像素按 RGB 距离分组，最多迭代 20 轮。每个色块是一个分组的平均值。这意味着它可能在您的图片中任何位置都不会原样出现，细小的点缀色也可能被并入相邻的分组。需要精确的颜色时，请点击图片，而不要依赖色块。
- 点击图片，拾取精确的像素。 图片下方写着“点击图片以采样像素颜色”。每次点击都从原尺寸图片中读取一个像素，而不是从缩小后的副本，即使预览比原图小或带有空白边距也是如此。拾取的颜色以带十六进制色值的标签形式出现。点击标签可复制它，点按 × 可移除它。已经拾取过的颜色不会重复添加，只保留最近的 12 个，点击边距不会有任何反应。拾取的颜色与色块是分开的，不属于导出内容。
- 用对比度行来选择文字颜色。 在每个色块下方，对比度行给出黑色文本和白色文本放在该颜色上的比值，保留一位小数。比值使用 WCAG 相对亮度公式。本站的配色方案生成器把 4.5:1 评为 AA，所以请把它当作正文的下限。在示例中，#4C69EB 与黑色为 4.5:1，与白色为 4.6:1，所以两者都不够舒适，而 #DAEFFB 与黑色为 17.7:1。
- 选择适合您代码的导出方式。 在“导出为”下选择 CSS、Tailwind、SCSS 或 JSON，查看预览框，然后点按“复制代码”。CSS 给出名为 --color-1 起的 :root 变量，SCSS 给出 $color-1 起，Tailwind 给出 palette-1 起，全都是小写十六进制。JSON 给出每种颜色的大写十六进制、rgb 数值，以及保留一位小数的占比。“复制完整调色板”会用逗号分隔复制十六进制色值。“下载 PNG 色条”会保存一张 1000 × 200 的图片，每种颜色的宽度与其占比成正比，文件名形如 photo_palette.png。
常见问题及解决方法
- 它显示“无法加载图片。文件可能已损坏或格式不支持。”
- 浏览器接受了这个文件，但无法把它解码为图片。常见原因是文件损坏或只下载了一半，或者是您的浏览器无法绘制的图片。请在其他程序中打开原图，重新另存或导出为 JPEG 或 PNG，然后添加新文件。出现这条提示时，色块列表保持为空。
- 它显示“report.pdf 是此工具无法打开的 PDF 文件。”（显示您自己的文件名和类型）。
- 拖放区会读取文件最前面的几个字节，所以把 PDF 改名为 .jpg 没有用。这个工具可以打开 JPEG、PNG、WebP、GIF 和 iPhone 的 HEIC 照片。AVIF、BMP、TIFF 和 SVG 文件会被拒绝。无法识别的文件会得到“不支持此文件格式。”和它的文件名。请先把图片转换为 JPEG 或 PNG。提示之后可能会有一个指向能打开该文件的工具的链接。0 字节的文件（通常是 OneDrive 或 iCloud 的占位文件）会得到专门的提示，要求您先下载它。
- 它显示“该网站不允许其他网站下载其文件。请先把文件下载到你的设备，再拖放到这里。”
- 这条提示出现在“或粘贴文件URL”和“获取”之后。您的浏览器向另一个网站请求图片，而大多数网站不允许其他网站下载它们的文件。请把图片保存到您的设备，再拖放到拖放区。另一条提示“链接返回错误（HTTP 404）”（状态编号为您自己的）则表示地址本身出了问题，请检查地址，或保存文件后拖放到这里。
- 滑块显示“颜色数量（12）”，但出现的色块更少。
- 取整后十六进制相同的颜色会被合并，空的分组会被丢弃，所以徽标、截图和简单图形这类色彩单一的图片，得到的色块会比滑块要求的少。这并没有问题。大部分透明的像素同样会被忽略，完全透明的图片则完全没有色块。想要更简洁的调色板，请调低滑块。想要更细腻的色调，在照片上可以调高到 16。
- 它显示“无法复制到剪贴板。”
- 浏览器拒绝了复制，这可能发生在页面不安全、显示在框架中，或浏览器已阻止剪贴板访问时。这条提示会一直保留，直到您移动滑块或加载另一张图片。请在页面上点击一下，再试一次。如果仍然失败，请选中“导出为”下预览框中的文字手动复制，或者改用“下载 PNG 色条”把调色板保存为图片。
对比分析
设计应用的取色器可以读取精确的像素，而这个工具在每次点击时也是这样做的。它多出来的是主色列表，通过对整张图片的颜色分组得出。它使用整张图片，所以大面积的背景会主导列表，也无法先选取区域或去掉背景。它基于最长边不超过 200 px 的副本工作，不给颜色命名，也不按色相排序。颜色保留在您的设备上，因为图片是在浏览器中读取的。如果要从单一颜色而不是照片来构建调色板，请使用配色方案生成器。