选择基础色，获取 11 个色阶（50-950）的 Tailwind 调色板，OKLCH 感知均匀步进。可导出为 v3 config、v4 @theme 或 CSS 变量。
/* Tailwind v4 — @theme block in your main CSS */
@theme {
--color-brand-50: #f2f7ff;
--color-brand-100: #e2ebff;
--color-brand-200: #c5d3ff;
--color-brand-300: #a5b2ff;
--color-brand-400: #858dff;
--color-brand-500: #6a6cff;
--color-brand-600: #5854f3;
--color-brand-700: #463bd1;
--color-brand-800: #342ba4;
--color-brand-900: #261f7c;
--color-brand-950: #120e49;
}一个稳健的设计系统需要的不仅仅是单一品牌色：你需要 50 用于背景，500 用于强调色，900 用于浅色主题上的正文，以及中间 8 个均匀间隔的步骤。手动在 HSL 中计算很繁琐，因为 HSL 亮度不是感知均匀的 —— 在相同 L 下，黄色 500 看起来比蓝色 500 亮得多。本生成器在 OKLCH（Tailwind v4 本身使用的色彩空间）中进行转换，因此无论基础色相如何，每一步看起来都均匀间隔。选择基础 hex（或使用预设），命名你的颜色，并导出为 Tailwind v3 config 对象、Tailwind v4 @theme 块或纯 CSS 自定义属性。
Step | 亮度目标 (OKLCH L) | Chroma 系数 50 | 0.98 | 0.15 100 | 0.95 | 0.30 200 | 0.89 | 0.55 300 | 0.81 | 0.80 400 | 0.72 | 1.00 ← 最大 chroma 500 | 0.62 | 1.00 ← 基础色相 600 | 0.55 | 1.00 700 | 0.47 | 0.95 800 | 0.39 | 0.80 900 | 0.32 | 0.65 950 | 0.22 | 0.45 Chroma 在两极逐渐变窄，因此 50 和 950 不会看起来不自然地饱和。