Tailwind CSS 调色板

Tailwind CSS 自带 26 个色系的调色板，每个色系有 11 个色阶，从 50（最浅）到 950（最深）。v4 用 OKLCH 定义它们，v3 用 HEX。本工具以两种格式列出每一个值，把 v4 的颜色转换成 HEX，并生成可直接使用的 @theme CSS 或 tailwind.config.js 代码。在自定义模式下，它会参照色相最接近的 Tailwind 色系，用你的品牌色生成完整的 50–950 色阶。

使用方法

1. 选择“默认 Tailwind 调色板”并选一个色系（或全部），或选择“由我的颜色生成自定义色阶”。
2. 选择 Tailwind v4 或 v3，以决定代码格式。
3. 自定义色阶时，输入你的颜色和一个名称，例如 brand。
4. 把代码复制到你的 CSS（v4）或配置文件（v3）中，然后使用 bg-brand-500 这样的类。

计算公式

自定义色阶：基准色在明度最接近的那一阶保持原值；更浅的各阶用 L = 1 − (1 − Lᵢ)(1 − L_b)/(1 − L_k)，更深的各阶用 L = Lᵢ · L_b/L_k，色度 C = C_b · Cᵢ/C_k，其中 Lᵢ、Cᵢ 取自参照色系。

L_b、C_b 是你的颜色的 OKLCH 明度和色度，L_k、C_k 是参照色系在该阶的值。色相随参照色系各阶之间的小幅漂移而变化。超出 sRGB 的颜色会降低色度。

示例

blue-500 在 v4 中是 oklch(62.3% 0.214 259.815)，在 v3 中是 #3b82f6。在自定义模式中输入 #3B82F6，它会落在参照 blue 的色阶的 500 阶，所以 --color-brand-500 恰好是 #3b82f6，其余十阶则围绕它变浅或变深。