Elysia Tools
导航
Design
· 最后更新：2026-06-23
抓取远程图片 URL，提取主色调，导出可直接用于代码的配色文件，并查看对比度结果
详情
粘贴图片直链后，即可从远程图片颜色生成可下载的 CSS、Tailwind、JSON、ASE 和 ACO 配色包。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
图片 URL 配色提取器是一款专为设计师和前端开发者打造的实用工具。只需粘贴远程图片的直链 URL，工具即可自动抓取并分析图像，提取出核心主色调，生成包含 CSS 变量、Tailwind 配置、JSON、ASE 和 ACO 格式的完整配色包，同时提供颜色对比度检测，帮助您快速将视觉灵感转化为可直接用于生产环境的代码。
背景
团队正在筹备新产品发布会，主视觉图已上传至服务器，需要基于该图建立一套网页配色规范。
问题
需要快速提取主视觉图中的 6 个核心颜色，并输出为设计软件和前端代码都能直接使用的格式。
如何使用
在“图片 URL”中输入主视觉图的直链，设置配色数量为 6，并在“导出包名称”中输入 launch-hero-palette。
{
"imageUrl": "https://example.com/hero.jpg",
"paletteSize": 6,
"exportPackageName": "launch-hero-palette"
}结果
成功提取出 6 个主色，并在页面上直观预览了对比度，同时下载了包含 CSS、Tailwind 和 ASE 格式的配色包。
背景
运营提供了一个托管在 CDN 上的产品宣传图 URL，要求专题页的整体色调必须与产品图完美契合。
问题
手动用吸管工具取色效率低下，且需要手动转换成 Tailwind 的配置格式。
如何使用
粘贴产品图的 CDN 链接，设置配色数量为 8，导出包命名为 cdn-brand-kit。
{
"imageUrl": "https://cdn.example.com/product.png",
"paletteSize": 8,
"exportPackageName": "cdn-brand-kit"
}结果
自动生成了 8 色的色板，直接复制生成的 Tailwind 配置代码到项目中，省去了手动转换的步骤。
支持导出 CSS 变量、Tailwind 颜色配置、JSON、ASE（Adobe Swatch Exchange）和 ACO（Adobe Color Swatch）格式。
可以自由设置提取的颜色数量，范围在 5 到 10 个之间。
请确保输入的 URL 是公开可访问的图片直链，且目标服务器未限制跨域请求（CORS）。
不会，工具仅在线抓取并解析图片颜色，不会在服务器上存储您的图片文件。
可以，导出的 ASE 和 ACO 文件可以直接导入 Photoshop、Illustrator 等主流 Adobe 设计软件中。