Elysia Tools
导航
Design
上传图片后提取主色调，导出代码可用的色板片段，并检查对比度
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
图片配色提取器是一款专为设计师和开发者打造的实用工具。只需上传一张图片（支持 JPEG、PNG、WEBP、GIF 格式），即可自动分析像素并提取最具代表性的主色调，生成包含 5 到 10 种颜色的专业色板。提取完成后，工具不仅会提供色彩对比度检查以确保无障碍阅读，还能一键导出适用于前端开发的 CSS 变量、Tailwind 配置代码，以及设计软件可用的色板包，帮助您快速将视觉灵感转化为实际的项目资产。
背景
开发者拿到了一张优秀的落地页视觉截图，需要将其中的配色应用到自己的新项目中。
问题
手动用吸管工具取色并编写 CSS 变量非常繁琐，且容易遗漏主次色调的层级关系。
如何使用
上传落地页截图，将配色数量设置为 6，并命名导出包为 `landing-brand`。
{
"paletteSize": 6,
"exportPackageName": "landing-brand"
}结果
成功提取 6 种核心颜色，直接复制生成的 Tailwind 配置代码粘贴到项目中即可使用，同时查看了对比度报告确保可用性。
背景
设计师拍摄了一组全新的产品宣传图，需要基于这些图片制定一套品牌衍生色板。
问题
需要快速提取主色调，并同步给使用 Adobe 软件的设计团队和负责落地的开发团队。
如何使用
上传产品主视觉图片，将配色数量调整为 8，设置导出包名称为 `product-photo-palette`。
{
"paletteSize": 8,
"exportPackageName": "product-photo-palette"
}结果
生成了包含 8 个主色的色板，并一键下载了包含 ASE、ACO 和 JSON 格式的完整色板包，极大提升了团队协作效率。
支持常见的图片格式，包括 JPEG、PNG、WEBP 和 GIF，单张图片文件大小限制为 20MB。
可以，您可以通过“配色数量”选项设置提取 5 到 10 种主色调，系统默认提取 6 种颜色。
工具会自动生成通用的 CSS 变量（CSS Variables）以及适用于 Tailwind CSS 的配置代码，方便直接粘贴到项目中使用。
导出的色板包通常包含供开发使用的 JSON 文件，以及供 Adobe 等专业设计软件使用的 ASE 和 ACO 格式文件。
对比度检查可以帮助您评估提取的颜色组合是否符合 Web 无障碍（WCAG）标准，确保文本在背景色上具有良好的可读性。