Elysia Tools
导航
Design
从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
详情
上传一张图片，工具会：
color1… 或语义化 primary/accent…），并附上占比 %，让你一眼看出哪些颜色占主导。设定令牌 前缀（如 brand、app）与命名风格，把生成的代码直接复制进项目，设计系统就能立刻消费这套调色板。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
图片调色板转设计令牌工具能够通过 k-means 聚类算法快速提取上传图片中的主导颜色，并自动生成 Tailwind 或 Material 风格的渐变色阶，最终将其导出为 CSS 变量、SCSS 变量、Tailwind 配置或 JSON 设计令牌，帮助设计师和前端开发人员无缝构建和同步设计系统。
背景
需要根据 UI 设计师提供的品牌海报，在 Tailwind CSS 项目中配置一套全新的主题色。
问题
手动用吸管工具吸色并手动计算 50-950 的色阶非常繁琐，且容易导致色彩过渡不均匀。
如何使用
上传海报图片 `poster.png`，将调色板大小设为 `5 色`，色阶选择 `Tailwind 风格`，输出格式选择 `Tailwind 配置 (JS)`，前缀设为 `brand`，命名风格设为 `semantic`。
{
"paletteSize": "5",
"scale": "tailwind",
"format": "tailwind",
"prefix": "brand",
"naming": "semantic"
}结果
工具自动提取出 5 个主色并生成了对应的 50-950 色阶，输出了一段可以直接粘贴到 `tailwind.config.js` 中的 theme.extend.colors 配置代码。
背景
团队正在构建一套跨平台的设计系统，需要将一张自然风景图的配色转化为 JSON 格式的设计令牌，供 iOS、Android 和 Web 端共同消费。
问题
需要标准化的 JSON 结构，且需要带有明确的颜色占比和前缀，避免命名冲突。
如何使用
上传风景图 `nature.webp`，调色板大小选择 `8 色`，色阶选择 `无`，输出格式选择 `JSON 设计令牌`，前缀设为 `sys-color`，命名风格设为 `numeric`。
{
"paletteSize": "8",
"scale": "none",
"format": "json",
"prefix": "sys-color",
"naming": "numeric"
}支持上传 PNG、JPG、JPEG、WebP、GIF 和 AVIF 格式的图片，文件大小限制在 10MB 以内。
它是一种机器学习算法，通过将图片中的像素颜色划分为指定的 K 个群组，从而精准找出视觉上最占主导地位的几种核心颜色。
工具在保持主色调的色相与饱和度大致不变的前提下，通过等比调整亮度来生成从浅到深的渐变色阶。
语义化命名会使用 primary、accent 等代称，而数字命名则直接使用 color1、color2 等递增数字作为变量名。
可以。在“输出格式”中选择“全部格式”（all），工具将同时生成 CSS 变量、SCSS 变量、Tailwind 配置和 JSON 设计令牌。
结果
生成了包含 8 种主色 RGB/HEX 值及占比的标准化 JSON 令牌文件，变量名形如 `sys-color-1`，可直接导入到设计系统工具中进行多端分发。