设计工具
颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
设计工具
色阶生成器
由基色生成一套 50–900 色阶，可复制为 CSS 变量
工具面板
关于色阶生成器
由基色生成 50–900 十档色阶，每档都是基色与白或黑按固定比例混合——公式简单、结果可独立复算，中途不会偏色。可整段复制成 CSS 变量。
- 1
从基色生成 50 到 900 共十档色阶，每档是「基色与白或黑按固定比例混合」——比例写死在 0.05 到 0.95 之间，不是色相旋转。
- 2
因为只调整明度不动色相，生成的整条色阶不会在中途偏色，公式也能手算复现（50 档 = 基色 5% + 白色 95%）。
- 3
直接导出 CSS 变量：`:root { --color-500: …; }` 形式，一次复制整段粘进样式表。
- 1
选基色
默认蓝 #3b82f6，可换成品牌色。
- 2
看十档结果
500 档就是基色本身，往上越浅、往下越深。
- 3
复制 CSS
输出的变量名固定为 --color-50 到 --color-900。
档位命名相同，但生成方式不同：Tailwind 的每个档位是独立调色过的，这里是统一公式从基色推导，所以深色档的饱和度会比手工调的低一些。
不能，固定十档。需要更密的阶梯，可以对两次生成的结果取中间值，或改用调色板工具从图片提取。