图片提取配色
从任意照片中提取主色，输出 HEX、RGB 和 HSL。 所有处理都在本地完成，不会上传任何内容。
- 输入
- PNG · JPEG · WebP · GIF · SVG
- 输出
- HEX · RGB · HSL · CSS · JSON
拖入图片
照片、截图或标志：PNG、JPEG、WebP、GIF 或 SVG。也可以直接粘贴图片。
从任意图片中提取配色方案
拖入一张照片、截图或标志，这个配色方案生成器就会提取出其中的主色，并按每种颜色在画面中所占的比例排序。你可以选择 3 到 12 个色块，把任意一个复制为 HEX、RGB 或 HSL，点击图片上的任意位置吸取某个像素的精确颜色，并把配色导出为 CSS 变量、SCSS、Tailwind 配置、JSON 或 PNG 色条。图片在你自己的设备上分析，从不上传。
如何从图片中提取颜色
- 把图片拖到页面上，从文件中选择，或直接从剪贴板粘贴。PNG、JPEG、WebP、GIF 和 SVG 都可以。
- 把颜色数设为你想要的色块数量。列表上方的色条按每种颜色在图片中的占比显示。
- 点击某个色值，即可复制为 HEX、RGB 或 HSL。
- 需要某个特定位置的颜色，比如截图中按钮的颜色？点击图片上的该点进行取样，再用加号按钮把它加入配色。
- 选择导出格式并复制代码，或把配色下载为 PNG 色条。
如何找出主色
一张照片很容易包含十万种不同的颜色，其中大多数只是彼此的细微变化。为了找出真正重要的几种，图片会先被缩小，然后用一种叫做 k-means 聚类的方法，把每个像素与看起来最相似的像素归为一组。每一组成为一个色块：取组内像素的平均值，并按所含像素数量排序。
有两个细节让结果比简单的取色器更好。第一，颜色在 OKLab 中比较，这个色彩空间的设计目标是让相等的距离在人眼看来也是相等的差异。在普通 RGB 中聚类，往往会把绿色拆成许多几乎相同的色调，却把明显不同的蓝色混在一起。第二，初始点以确定性的方式选取，优先选择既常见、又与已选颜色相距较远的颜色，因此同一张图片总是得到同样的配色，而一个面积小但鲜艳的点缀色，例如灰墙上的红色标志，也不会被背景吞没。
透明像素会被忽略，所以透明 PNG 上的标志给出的是标志本身的颜色，而不是一块黑色。
HEX、RGB 和 HSL：该复制哪一种
需要 OKLCH、CMYK 或 HSV，或者某个色块的浅色版本？把 HEX 值粘贴到颜色转换器中，它会显示所有表示法，以及浅色、深色和配色组合。
- HEX
- #2a9d8f。用六位十六进制数字表示红、绿、蓝。最紧凑的写法，所有设计工具和 CSS 都接受。
- RGB
- rgb(42, 157, 143)。同样的三个通道，用 0 到 255 的数字表示。适合需要对颜色做计算的代码，或要求分别填写数值的工具。
- HSL
- hsl(173 58% 39%)。色相、饱和度和亮度。最便于手动调整的写法：提高亮度得到悬停状态，降低饱和度得到柔和的变体。
导出格式
- CSS 变量：一个包含
--palette-1、--palette-2等变量的:root代码块，可直接用于任何样式表。 - SCSS：
$palette-1形式的变量，用于 Sass 项目。 - Tailwind v3 配置：用于
tailwind.config.js的theme.extend.colors对象，可生成bg-palette-1这样的类名。 - Tailwind v4 @theme：
--color-palette-1自定义属性，用于 Tailwind 4 以 CSS 为先的配置方式。 - JSON：包含每种颜色 HEX、RGB 和 HSL 值的数组，供脚本和设计令牌使用。
- PNG 色条：把色块并排排成一张图片，用于情绪板、需求简报或聊天消息。
获得实用配色的技巧
- 品牌设计用少一点的颜色，插画用多一点。五六个色块通常就能抓住一张照片的氛围；如果还需要辅助色调，可以提高到 10 或 12 个。
- 先裁剪。大片天空或白色页边会主导结果。只保留你关心的那部分图片，配色才能反映它。
- 用作文字颜色之前先检查。从照片中提取的颜色很少自带足够的文字对比度。准备在上面放文字的颜色组合，都请用对比度检查器检查一遍。
- 需要精确色值时用吸管。主色是平均值。当你需要某一个像素的准确颜色，例如截图中的标志或界面元素时，直接点击它。
常见问题
- 怎么从图片中提取配色？
- 把图片拖到本页面。主色会立即出现，并按在图片中所占的面积排序。你可以修改颜色数量，把每种颜色复制为 HEX、RGB 或 HSL，并把整套配色导出为 CSS、Tailwind 或 JSON。
- 怎么获取图片中某个颜色的 HEX 代码？
- 加载图片后点击你想要的确切位置。吸管会显示该像素的 HEX、RGB 和 HSL 值，点击任一值即可复制。
- 主色是怎么计算的？
- 图片会先被缩小，然后在 OKLab 色彩空间中用 k-means 对像素聚类，OKLab 按人眼感知的方式衡量颜色差异。每个聚类的平均色成为一个色块，并按所含像素的比例排序。
- 为什么得到的颜色和其他工具略有不同？
- 每个提取工具对相似像素的分组方式都不同，而色块是这些分组的平均值，而不是单个像素。本工具的初始点选取是确定性的，所以同一张图片在这里总是得到相同的结果。需要精确的像素值时，请使用吸管。
- 可以把配色导出到 Tailwind CSS 吗？
- 可以。选择 Tailwind v3 配置可得到一个粘贴到 tailwind.config.js 中的 colors 对象，选择 Tailwind v4 @theme 则用于以 CSS 为先的配置，然后复制或下载代码。
- 支持透明 PNG 和标志吗？
- 支持。大部分透明的像素会被跳过，因此配色反映的是可见的图案，而不是空白背景。
- 我的图片会被上传吗？
- 不会。图片在你的浏览器中解码和分析，从不离开你的设备。