# Tailwind 色阶生成器 - 一个颜色生成 50～950 色板（OKLCH）

> 输入品牌色，按 Tailwind 默认色板的 OKLCH 亮度曲线生成 50～950 共 11 级色阶，标注白底/黑底对比度，导出 Tailwind v3 配置、v4 @theme、CSS 变量、SCSS 与 JSON。

- 网址: https://qilingtools.com/zh/tailwind-palette
- 分类: 开发工具 (https://qilingtools.com/zh/dev)
- 标签: [设计配色](https://qilingtools.com/zh/tags/design), [开发](https://qilingtools.com/zh/tags/dev), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

用 Tailwind 做项目时，品牌色通常只有一个，但组件需要 bg-brand-50 到 bg-brand-950 一整套深浅变化。这个工具从一个基色出发生成 11 级色阶：先把颜色转换到感知均匀的 OKLCH 色彩空间，再参考 Tailwind v4 默认色板（取自 tailwindcss/theme.css）的亮度与彩度分布——默认按色相在最接近的两个内置色板之间插值，所以黄色系会更亮、紫色系更深，与 Tailwind 原生色板的观感一致；低彩度的灰色会自动过渡到 slate、zinc 等中性色的曲线。基色可以自动放在亮度最接近的一级，也可以锁定在 500、600 等指定位置并保证该级就是你的原色；可以叠加两端的色相偏移，或跟随 Tailwind 自带的色相漂移。超出 sRGB 的颜色会保持色相降低彩度。每一级都显示与白色、黑色的 WCAG 对比度和 AA / AAA 标记，方便挑选文字与背景组合，并列出最接近的 3 个内置 Tailwind 色板作参考。可以同时生成多个命名颜色，一次导出 Tailwind v3 的 tailwind.config.js、v4 的 @theme（oklch() 值）、CSS 变量、SCSS 变量与 map 或 JSON。

## 使用步骤

1. 输入颜色名称和基色（HEX、rgb()、hsl()、oklch() 都可以），可添加多个颜色
2. 选择基色所在的级别、亮度曲线和色相偏移，查看每一级的对比度
3. 选择导出格式（Tailwind v4 / v3、CSS 变量、SCSS、JSON），复制或下载

## 功能特点

- 按 Tailwind 默认色板的 OKLCH 亮度曲线生成 50～950
- 按色相匹配曲线，灰色自动使用中性色曲线
- 基色可锁定在任意一级，保证原色不变
- 色相偏移与跟随 Tailwind 色相漂移
- 每级显示白底 / 黑底 WCAG 对比度与 AA / AAA
- 对比最接近的 3 个 Tailwind 内置色板
- 多个命名颜色一起生成
- 导出 v4 @theme、v3 配置、CSS 变量、SCSS、JSON

## 常见问题

### 生成的色阶和 Tailwind 自带的颜色有多接近？

曲线直接取自 Tailwind v4 的默认色板数据。用 Tailwind 自己的 blue-500、red-500 作为基色锁定在 500 时，生成结果与原色板的平均色差（OKLab ΔE）大约在 0.003～0.015 之间，肉眼几乎看不出区别。实际品牌色往往彩度和亮度不同，生成结果会保留你的色相和彩度特征，同时让深浅分布与 Tailwind 原生色板保持一致。

### 基色应该放在 500 还是 600？

选“自动”时，工具会把基色放在亮度最接近的那一级，这样整套色阶最自然。如果设计规范要求主按钮用 brand-600，就把基色锁定在 600，该级会严格等于你的原色，其余各级相应调整。很亮的颜色（如浅黄）锁定在深色级别时，上方可用的亮度空间很小，浅色几级会比较接近。

### Tailwind v3 和 v4 的配置有什么不同？

v3 在 tailwind.config.js 的 theme.extend.colors 里定义颜色对象，工具导出的是十六进制值；v4 改为在 CSS 中用 @theme 声明 --color-brand-500 这样的变量，官方色板使用 oklch()，所以 v4 导出也使用 oklch() 值。两种方式定义后都可以直接使用 bg-brand-500、text-brand-700 等类名。

### 对比度标记 AA、AA18、AAA 是什么意思？

这是 WCAG 2.x 的文字对比度要求：AA 表示对比度 ≥ 4.5，可用于正文；AA18 表示 ≥ 3，只适合 18pt（约 24px）以上或 14pt 粗体的大号文字以及图标等界面元素；AAA 表示 ≥ 7。每个色块下方分别显示该颜色与白色、黑色的对比度，例如某一级在白底上达到 AA，就可以作为白色背景上的正文颜色。

## 相关工具

- [JSON 格式化](https://qilingtools.com/zh/json): 免费在线 JSON 格式化：一键美化、压缩，实时语法校验并定位到出错行列，支持树形视图折叠、键名排序、转义与去转义、Unicode 转中文、复制下载，数据不上传。
- [Base64 编解码](https://qilingtools.com/zh/base64): 免费在线 Base64 编码解码工具：支持中文 UTF-8、URL 安全变体，文本与 Base64 互转，实时转换，本地处理不上传。
- [URL 编解码](https://qilingtools.com/zh/url-encode): 免费在线 URL 编码解码工具：encodeURIComponent 与 encodeURI 两种模式，处理中文、空格与特殊符号，本地实时转换不上传。
- [JWT 解析](https://qilingtools.com/zh/jwt): 免费在线 JWT 解析工具：解码 JWT 的 Header 与 Payload，展示过期时间、签发时间等，本地解析不上传，保护令牌安全。
- [时间戳转换](https://qilingtools.com/zh/timestamp): 免费在线 Unix 时间戳转换工具：时间戳与日期互转，自动识别秒/毫秒，显示本地时间、UTC、ISO 8601 和相对时间，实时更新。
- [哈希计算](https://qilingtools.com/zh/hash): 免费在线哈希/摘要计算工具：对文本或文件计算 SHA-1、SHA-256、SHA-384、SHA-512，使用浏览器加密接口本地完成，文件不上传。
- [UUID 生成](https://qilingtools.com/zh/uuid): 免费在线 UUID 生成器：使用加密安全随机数批量生成符合 RFC 4122 的 UUID v4，可大写、去连字符、加花括号，一键复制。
- [进制转换](https://qilingtools.com/zh/base-convert): 免费在线进制转换工具：二进制、八进制、十进制、十六进制及任意 2–36 进制互转，支持大整数（BigInt），本地实时计算。