CSS 颜色变量生成器

每行输入一个十六进制颜色,工具会按顺序生成 :root 下的 CSS 自定义属性(--color-1、--color-2…),并支持自定义变量前缀,方便在项目中统一维护配色。全部处理都在浏览器本地完成,数据不会上传服务器。

颜色列表 等待输入

每行一个十六进制颜色,支持 #ffffff 与 #fff 写法,空行会自动忽略。按 Ctrl + Enter 可快速生成。输入仅在本机解析,不会上传服务器。

生成的 CSS
颜色数量 —
变量前缀 —
输出行数 —
输出字符数 —
填写颜色后点击「生成变量」,CSS 代码将显示在这里。

生成的变量名按顺序编号,可直接粘贴到样式表中使用,结果仅供参考。

使用说明
  • 每行输入一个十六进制颜色,支持 #ffffff 与 #fff 两种写法,大小写均可。
  • 变量名按输入顺序编号,默认前缀为 color,生成 --color-1、--color-2 等。
  • 可在侧栏修改前缀,例如改为 brand 后生成 --brand-1。
  • 生成的代码形如 :root{ --color-1:#ffffff; },可直接粘贴到样式表。
  • 使用时通过 var(--color-1) 引用对应颜色。
  • 若某行不是有效的十六进制颜色,会提示具体行号,便于快速定位修改。