1. 从品牌海报提取 Tailwind 调色板
前端开发工程师背景
需要根据 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 配置代码。