输入一个品牌色，自动派生 primary / secondary / success / warning / danger 五组语义色，导出 Tailwind 与 CSS 变量。
2F6FED · L 57%
Primary 主色
自动派生，保留品牌明度与彩度
Secondary 辅助
自动派生，保留品牌明度与彩度
Success 成功
自动派生，保留品牌明度与彩度
Warning 警告
自动派生，保留品牌明度与彩度
Danger 危险
自动派生，保留品牌明度与彩度
导出代码
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: "#010101",
light: "#010101",
dark: "#000101",
foreground: "#ffffff",
},
secondary: {
DEFAULT: "#010101",
light: "#010101",
dark: "#010101",
foreground: "#ffffff",
},
success: {
DEFAULT: "#000101",
light: "#010101",
dark: "#000100",
foreground: "#ffffff",
},
warning: {
DEFAULT: "#010100",
light: "#010101",
dark: "#010100",
foreground: "#ffffff",
},
danger: {
DEFAULT: "#010101",
light: "#010101",
dark: "#010000",
foreground: "#ffffff",
},
},
},
},
};输入品牌色，自动派生界面必需的五组语义色并导出代码。
粘品牌 HEX；语义色会继承它的明度与彩度特征。
Success 落在绿色相区间、Warning 落在琥珀、Danger 落在红——色相由色彩语义决定，气质与品牌统一。
Tailwind 配置 / CSS 变量 / JSON 三种格式一键复制，直接进设计系统。
接入设计系统时的三个高频问题。
进色板编辑器把五角色演成真实界面。