CSS 颜色生成器
将基色扩展为 10 级色阶，并导出为 CSS 变量。
100% 隐私保护——一切都在浏览器中运行
广告
使用方法
- 1
输入基色，或直接可视化取色。
- 2
即时生成从 50（最浅）到 900（最深）的 10 级色阶。
- 3
点击任意色块可复制该色块的 HEX 值。
- 4
复制整段 CSS 自定义属性，用于你的项目。
示例
从 #3B82F6 生成色阶
输入
#3B82F6输出
--color-50 #F5F9FF … --color-500 #3B82F6 … --color-900 #112445直接用于 CSS
输入
粘贴复制的内容输出
:root { --color-500: #3B82F6; … }常见问题
色阶是如何生成的？
50–400 级向白色混合（浅色调），600–900 级向黑色混合（深色调），500 级保持基色不变。
生成的变量怎么使用？
将整段代码粘贴到样式表顶部，之后在 CSS 中用 var(--color-500) 引用任意一级。
颜色会被发送到服务器吗？
不会，色阶在浏览器本地生成。