# 图片调色板转设计令牌

从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶

> 标准页面: https://elysiatools.com/zh/tools/image-to-design-tokens

- **分类:** Design

- **关键词:** 调色板, 设计令牌, 颜色提取, css 变量, tailwind

## 概述

上传一张图片，工具会：

1. 将其缩小并对像素做 **k-means 聚类**，找出最主导的颜色（可选 3 / 5 / 8 / 12 个）。
2. 为每个颜色命名（数字 `color1`… 或语义化 `primary`/`accent`…），并附上占比 %，让你一眼看出哪些颜色占主导。
3. 可选地为每个颜色生成 **色阶**（Tailwind 风格 50–950 或 Material 风格 100–900）：保持色相与饱和度大致不变，按亮度递进——从浅色到深色一条可用色阶。
4. 把结果序列化成你选定的格式：CSS 变量、SCSS 变量、Tailwind 配置对象、JSON 设计令牌，或四者全部。

设定令牌 `前缀`（如 `brand`、`app`）与命名风格，把生成的代码直接复制进项目，设计系统就能立刻消费这套调色板。

## 输入项

- **源图片** (file): PNG, JPG, WebP…
- **调色板大小** (select)
- **色阶** (select)
- **输出格式** (select)
- **令牌前缀** (text): e.g. brand, app, theme
- **命名风格** (select)

## 适用场景

- 需要从品牌视觉图、摄影作品或 UI 截图中快速提取核心配色方案时。
- 在构建设计系统时，需要为提取的颜色自动生成符合 Tailwind (50–950) 或 Material (100–900) 规范的完整色阶。
- 需要将提取的调色板直接转化为可用于前端项目的 CSS 变量、SCSS 变量、Tailwind 配置或 JSON 格式的设计令牌时。

## 工作原理

- 上传 PNG、JPG、WebP、GIF 或 AVIF 格式的源图片。
- 选择提取的调色板大小（3、5、8 或 12 色），并配置是否生成色阶（如 Tailwind 风格 50–950）以及令牌前缀和命名风格。
- 工具通过 k-means 聚类算法对图片像素进行降维分析，计算出占比最高的主色，并根据亮度递进算法生成对应的色阶。
- 实时预览提取的颜色占比与色阶，并一键复制生成的 CSS、SCSS、Tailwind JS 或 JSON 代码。

## 使用案例

- 品牌视觉提取：上传品牌海报或 Logo 图片，提取主色并生成统一的 CSS 变量，用于网站主题开发。
- UI 界面重构：从现有的 UI 设计稿截图中提取配色，快速生成 Tailwind 配置文件，加速前端还原度。
- 设计系统同步：将提取的调色板导出为标准的 JSON 设计令牌，以便在 Figma 插件或跨平台开发工具中进行同步。

## 常见问题

### 这个工具支持哪些图片格式？

支持上传 PNG、JPG、JPEG、WebP、GIF 和 AVIF 格式的图片，文件大小限制在 10MB 以内。

### 什么是 k-means 聚类提取颜色？

它是一种机器学习算法，通过将图片中的像素颜色划分为指定的 K 个群组，从而精准找出视觉上最占主导地位的几种核心颜色。

### 导出的色阶是如何计算出来的？

工具在保持主色调的色相与饱和度大致不变的前提下，通过等比调整亮度来生成从浅到深的渐变色阶。

### 语义化命名（semantic）和数字命名（numeric）有什么区别？

语义化命名会使用 primary、accent 等代称，而数字命名则直接使用 color1、color2 等递增数字作为变量名。

### 我可以一次性导出所有的代码格式吗？

可以。在“输出格式”中选择“全部格式”（all），工具将同时生成 CSS 变量、SCSS 变量、Tailwind 配置和 JSON 设计令牌。

## 相关工具

- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [批量图片转换](https://elysiatools.com/zh/tools/batch-convert): 批量转换多张图片到不同格式，支持质量设置
- [批量图片裁剪](https://elysiatools.com/zh/tools/image-batch-crop): 批量裁剪多张图片到指定尺寸或宽高比，支持自定义定位，返回裁剪后的 ZIP 文件下载
- [图片缩放工具](https://elysiatools.com/zh/tools/image-resize): 专业的图片缩放工具，支持多种缩放方式、长宽比保持和格式转换，包含模糊背景功能，支持 GIF/Animated WebP/APNG 和 JPEG/PNG/WEBP 格式。
- [图片位深转 PNG 转换器](https://elysiatools.com/zh/tools/image-to-bit-depth-png): 将图片转换为精确的黑白、索引色、灰度、RGB 或 RGBA PNG 位深，并验证输出。
- [图片批量转 WebP](https://elysiatools.com/zh/tools/image-to-webp-batch-converter): 批量将图片或 ZIP 压缩包中的图片转换为 WebP，并返回 ZIP 下载包
- [PDF摄影接触表](https://elysiatools.com/zh/tools/pdf-photo-contact-sheet): 按网格生成缩略图接触表，并附带文件名与EXIF信息
- [批量图片转换](https://elysiatools.com/zh/tools/image-batch-convert): 批量转换多个图片文件格式，支持 JPG、PNG、WebP、AVIF、TIFF、GIF，支持质量设置和批量处理

## 示例

- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Web TypeScript 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-typescript): Web TypeScript 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

- [图片格式转换与动画导出工具](https://elysiatools.com/zh/hubs/image-convert): 在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
- [JSON 交换与格式翻译工具](https://elysiatools.com/zh/hubs/json-convert): 在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。
- [JSON 检查、对比与转换工具](https://elysiatools.com/zh/hubs/json-utility): 把 JSON 格式化、差异对比、路径检查、Schema 校验、合并、转换和导出工具集中到一个专题中，适合 API 与数据处理流程。
- [图片整理、修饰与批处理准备工具](https://elysiatools.com/zh/hubs/image-utility): 把图片清理、裁边、补边、加框、批量缩放压缩、水印和视觉修饰工具集中到一个专题中，适合素材整理流程。