CSS 变量生成器
可视化生成 CSS 自定义属性代码，支持 Tailwind CSS v4 格式导出。
颜色变量
rgb(99, 102, 241)hsl(239, 84%, 67%)
rgb(139, 92, 246)hsl(258, 90%, 66%)
rgb(244, 114, 182)hsl(329, 86%, 70%)
rgb(255, 255, 255)hsl(0, 0%, 100%)
rgb(24, 24, 27)hsl(240, 6%, 10%)
rgb(244, 244, 245)hsl(240, 5%, 96%)
rgb(228, 228, 231)hsl(240, 6%, 90%)
字体变量
间距变量
圆角变量
生成代码
使用说明
变量类型
支持颜色、字体、间距、圆角四类 CSS 自定义属性。颜色变量自动计算 RGB 和 HSL 值，间距变量提供可视化预览，圆角变量实时展示圆角效果
输出格式
Tailwind CSS v4：使用 @theme 指令，符合 v4 规范；标准 CSS：输出 :root 块；SCSS：使用 $ 变量语法
颜色选择
点击色块可打开系统取色器选色，也可在输入框手动输入 HEX 色值。变量名留空的项将被自动过滤不生成