配色生成器
生成和谐配色，锁定喜欢的颜色，并生成 Tailwind 风格色阶
- 文件不会离开你的设备
- 在浏览器本地运行
- 免费、免注册、无水印
3b82f6
e24956
3ba01b
如何使用配色生成器
用三种方式生成配色：按规则从基础色推导、随机生成并锁定喜欢的颜色，或生成类似 Tailwind 的 50–950 色阶。颜色在 OKLCH 中计算，支持多种导出格式。
- 1
选择「模式」：「配色规则」「随机」或「色阶」。
- 2
「配色规则」和「色阶」模式下先设置「基础色」，再选「规则」，或填写「颜色名称」和「基础色所在色阶」。
- 3
「随机」模式下点「生成」或按空格键，再次生成前先锁定想保留的颜色。
- 4
鼠标悬停在颜色上点复制图标；「配色规则」模式下还可以把它设为基础色。
- 5
在「导出」里选择 HEX、CSS、Tailwind v3、Tailwind v4 或 JSON 并复制，或下载 .gpl、.ase 文件。
常见问题
为什么在 OKLCH 中计算配色？
在 OKLCH 中旋转色相，每个颜色都能保持和基础色一样的感知明度和鲜艳度。如果在 HSL 中旋转，黄色会比蓝色亮得多。
50 到 950 的色阶是怎么生成的？
明度沿着接近 Tailwind 官方调色板的曲线变化，彩度在 500–600 附近最高。基础色会原样放在它所在的色阶上，选「自动」时放在明度最接近的那一级。
能回到之前的随机配色吗？
能。用「上一个配色」「下一个配色」切换，页面打开期间会保留最近 50 组，关闭页面后不会保存。
一套配色可以有多少种颜色？
随机配色有 2 到 10 种（用 − 和 + 按钮调整）。配色规则的数量固定，比如互补色 2 种、类似色和单色 5 种；色阶始终是 11 级。
Tailwind v4 导出是什么格式？
一个包含 --color-* 变量的 @theme 代码块，可直接粘贴到 CSS 里。色阶用 oklch() 写成 --color-brand-500 这样的变量，其他模式使用 HEX。