1根据品牌色快速生成一套可用的 Tailwind 调色板
- 1打开 Palette 官网(https://palette.tone-row.com/),在提示词输入框中描述品牌色,例如“以 #FF6B35 为主色的活力橙色系调色板”。
- 2等待工具生成包含 50–900 色阶的 Tailwind 调色板,并检查浅色模式下的颜色过渡是否符合预期。
- 3切换到深色模式预览,确认同一色板在深色背景下的可读性与对比度。
- 4复制生成的 Tailwind 配置代码,粘贴到项目的 tailwind.config.js 中即可使用。
2为现有项目补充一套协调的中性色板
- 1在 Palette 中输入提示词,例如“为暖色调 UI 生成一套偏暖的灰色中性色板”。
- 2查看生成的中性色阶(如 gray-50 到 gray-900),确认其与项目主色搭配是否自然。
- 3分别切换浅色和深色模式,检查中性色在两种模式下的层次感。
- 4复制对应的 Tailwind 颜色配置,替换或补充到项目的主题配置中。
3通过自定义颜色生成特定色阶并直接用于组件开发
- 1在 Palette 中指定一个或多个自定义颜色值,例如输入“基于 #1E3A8A 和 #10B981 生成两套色阶”。
- 2调整或确认生成的色阶分布,确保每个色阶(如 100、300、500、700)的明暗变化均匀。
- 3预览浅色与深色模式下的实际效果,确认按钮、卡片等常见组件的配色可用。
- 4复制生成的 Tailwind 代码,直接应用到组件类名中(如 bg-primary-500、text-neutral-700)。
