TailwindCSS 调色板生成器接受任意十六进制颜色值，输出从 50 到 950 共 11 个色阶的完整调色板，并生成可直接粘贴到 tailwind.config.ts 的配置代码。工具还会自动匹配最接近的 Tailwind 内置颜色名称。

输出的调色板结构

生成结果包含 11 个色阶：50（极浅）、100、200、300、400、500（与输入颜色最接近）、600、700、800、900、950（极深）。每个色阶同时计算对应文字颜色（深色背景配白色文字，浅色背景配深色文字），方便判断可读性。

配置代码粘贴位置

生成的 TypeScript / JavaScript 配置代码示例：

colors: {
  primary: {
    '50': '#fef2f2',
    '100': '#fee2e2',
    '500': '#ef4444',
    '900': '#7f1d1d',
    '950': '#450a0a',
  }
}

将此对象放入 tailwind.config.ts 的 theme.extend.colors 中，即可在项目中使用 bg-primary-500、text-primary-200 等类名。放入 theme.colors（不是 extend）则会替换掉所有 Tailwind 内置颜色。

颜色名称自动匹配

工具会将输入颜色与 Tailwind 内置调色板（red、blue、emerald 等）进行比对，若距离足够近则显示匹配到的颜色名称。这有助于判断是否直接使用内置颜色，而不必生成自定义色阶。

输入格式要求

只接受十六进制颜色值，可以带或不带 # 前缀，支持 3 位简写（如 #f00）和 6 位完整格式（如 #ff0000）。输入 CSS 命名颜色（如 red）或 HSL、RGB 等格式会提示无效。