CSS 变量生成器

工作原理

CSS 变量(也称为「自定义属性」)可以将视觉规范中的颜色集中到一处管理,避免在几十个文件中重复相同的十六进制代码,也便于日后切换主题(包括深色模式)。添加或删除行、调整每种颜色,:root 代码块就会实时更新,可直接粘贴到主样式表的顶部。

无效的变量名会被自动修正吗?

会:空格和不允许的字符会被替换为连字符,名称也会转为小写,以符合 CSS 的惯用约定。如果两个变量最终同名,会自动添加数字后缀以避免冲突。

除了颜色,还可以使用其他类型的值吗?

可以,「值」字段接受任何有效的 CSS 值(以 rem 为单位的尺寸、字体、渐变等),不过旁边的颜色选择器仍然便于快速搭配调色板。

隐私:您组合的调色板完全保留在您的浏览器中,不会发送或保存到任何服务器。