提取图片颜色 - 一键获取图片色值

一键从图片中提取颜色

提取图片颜色工具能在你把图片拖进来的瞬间，从任何照片、截图或图形中拉取主色调。上传一张图片，工具就会为每种颜色生成带有 HEX、RGB、HSL 色值的配色方案 — 无需猜测，也不用手动取色。

无论你是想从一张照片中寻找灵感的设计师、需要匹配品牌色的开发者，还是任何想从图片中获取精确色值代码的人，它都能派上用场。你还可以直接点击图片取出任意单个像素的颜色，再把整套配色复制或导出到你的项目中。

隐私优先：你的图片直接在浏览器中读取并提取颜色，不会上传到任何服务器，因此图片绝不会离开你的设备。

如何从图片中提取颜色

添加图片

点击上传区域浏览选择文件，将文件拖放进来，或复制一张图片后按 Ctrl+V（Mac 上为 Cmd+V）粘贴。支持 PNG、JPG、GIF 和 WebP 格式。

查看配色

主色调会立即以卡片形式呈现。每张卡片都显示一个色块、一条占比条、最接近的颜色名称，以及并排排列的 HEX、RGB、HSL 色值。

取出指定颜色

将光标悬停在图片上可预览光标下的颜色，点击即可取出该像素的精确颜色。当你需要精准取色时，使用放大按钮进入全屏视图。

调整与排序

用滑块提取 3 到 15 种颜色，可按占比、明度或色相对配色排序，点击重新提取即可刷新结果。

复制或导出

点击任意色值即可复制，使用全部复制一次性复制所有 HEX，或将配色导出为 CSS 变量、SCSS 变量、JSON 或 PNG 图片。

功能特点

智能颜色提取

采用 k-means 聚类算法将相似像素归类，找出真正的主色调，而非仅仅出现次数最多的颜色，让配色更贴合你看到图片时的感受。

交互式取色器

悬停即可通过实时 HEX 提示框预览光标下的颜色，点击即可取出任意像素。放大模式提供全屏视图，方便精准取色。

多种颜色格式

每种颜色都附带 HEX、RGB 和 HSL 色值，每个值都有独立的一键复制按钮，让你随手取用项目所需的格式。

颜色命名

每种颜色都会从庞大的色名数据库中匹配到最接近的命名颜色，让你更容易描述和记住配色中的各种色调。

灵活排序

可按占比排序以突出主色调，按明度从亮到暗排序，或按色相沿着色轮顺序排列。

颜色数量可调

一个简单的滑块让你提取 3 到 15 种颜色，既能保持精简的配色，也能捕捉更丰富的色调范围。

导出选项

将配色以 CSS 变量、SCSS 变量、JSON 数据，或带 HEX 标注的可下载 PNG 色卡形式带到任何地方。

配色历史记录

你最近的配色会保存在浏览器中，无需重新上传即可再次打开。随时可清空历史记录，重新开始。

常见问题

怎么从图片中提取颜色？

点击上传区域、拖入文件或从剪贴板粘贴即可添加图片。工具会读取图片并自动以配色方案的形式显示其主色调 — 无需安装，也无需注册。

怎么获取照片中某个颜色的 HEX 代码？

将光标悬停在想查看的位置即可看到光标下的颜色，点击即可取出该像素的精确颜色。它的 HEX 值会自动为你复制，你也可以点击颜色卡片上的任意色值进行复制。

能同时获取 RGB 和 HEX 吗？

可以。每种提取出的颜色都会一并列出 HEX、RGB 和 HSL 色值，每个值都有独立的复制按钮，让你取用所需的任意格式。

支持哪些图片格式？

PNG、JPG/JPEG、GIF 和 WebP 文件都支持。为获得最清晰的配色，请使用色彩分明的清晰图片，而非模糊或高度压缩的图片。

最多能提取多少种颜色？

用滑块可提取 3 到 15 种颜色。默认从 3 种开始，适合大多数图片；色彩更丰富的图片可调高数量，然后点击重新提取重建配色。

"占比"是什么意思？

占比表示某种颜色在整张图片中的主导程度。卡片上的占比条越满，说明该颜色覆盖图片的面积越大，让你一眼看清整体的色彩平衡。

能把配色导出为 CSS 或 JSON 吗？

可以。导出菜单让你将配色复制为 CSS 自定义属性或 SCSS 变量，复制为 JSON 以便编程使用，或下载 PNG 色卡。对于 CSS，把导出内容粘贴到你的 :root 中，再用 var(--color-1) 这样的值即可。

我的图片会被上传到服务器吗？

不会。所有处理都通过 JavaScript 在你的浏览器中运行，因此图片绝不会离开你的设备。你保存的配色历史记录也只留在你自己浏览器的本地存储中。