色阶调色板生成器（适用于 Tailwind CSS，50~950）
设定基准色和名称，即可生成 50 到 950 的色阶和配置代码。
输入的文字和文件不会发送到服务器，只在本浏览器中处理。
点击色块即可复制 HEX。下方数字是白字和黑字中更清晰一方的对比度。
Tailwind v4（@theme）
Tailwind v3（tailwind.config.js）
效果预览
已保存，修改内容会立即生效。
立即开始了解更多新功能
使用方法
- 选择基准色或输入 HEX 代码，并设置在类名中使用的颜色名称（如 brand）。
- 工具会按 OKLCH 亮度生成 50（最浅）到 950（最深）的色阶。勾选“把基准色原样放在最接近的色阶”后，所选颜色会原样出现在色板中。
- v4 请复制 CSS 中的 @theme 代码块，v3 请复制 tailwind.config.js 的 colors 部分，之后就能使用 bg-brand-500 这样的类名。
- 在下方预览中查看色板用在按钮、徽标和提示框上的效果。
常见问题
用 OKLCH 计算有什么好处？
OKLCH 以人眼感受到的亮度为基准，各级之间的亮度间隔更均匀，黄色、蓝色等不同色相亮度忽高忽低的问题也会减少。Tailwind v4 的默认颜色同样使用 oklch() 书写。
生成的颜色和 Tailwind 官方色板一样吗？
不一样。本工具使用自己的亮度和彩度曲线计算，数值与官方颜色不同，适合用自己的品牌色快速做出用途相近的色阶。
屏幕无法显示的颜色会怎样处理？
保持亮度和色相不变，只降低彩度，使其落入 sRGB 范围内。因此特别鲜艳的颜色在部分色阶中会显得稍微柔和一些。
Tailwind CSS 是 Tailwind Labs Inc. 的商标。本工具与 Tailwind Labs 无关联，也未获其认可。