CSS变量生成器

什么是CSS变量生成器？

如何使用CSS变量生成器

1. 1

   输入品牌色：在色值输入框中填入主品牌色的十六进制色值，也可以点击左侧色块打开拾色器，直接拖动选取你需要的品牌主色

2. 2

   选择输出格式：在输出格式选项区，勾选你需要导出的格式，可以同时勾选原生CSS、SCSS、Tailwind、JSON多种格式

3. 3

   调整色阶数量：拖动滑块或直接输入数值，自定义需要生成的色阶数量，调整色阶的亮度范围和相邻色阶的亮度步长

4. 4

   复制导出结果：在下方预览区查看生成好的完整主题色变量代码和色卡效果，确认无误后点击『复制』按钮把代码复制到剪贴板

什么场景会用到？

计算示例

注意事项

• 仅支持hex、rgb、hsl三种常用CSS颜色格式输入，不支持带alpha通道的rgba、hsla格式自动分级
• 命名前缀仅支持字母、数字和中划线，不支持特殊字符和空格，生成时会自动过滤不合法字符
• 生成的明暗色阶是基于HSL亮度通道线性渐变计算，实际显示效果会受显示器色彩校准影响存在细微偏差
• 如果输入的颜色过亮或过暗，生成的两端色阶可能接近纯白或纯黑，建议调整主色后重新生成

常见问题

参考资料

• MDN Web Docs 的 CSS Custom Properties for Cascading Variables 文档
• W3C CSS Custom Properties 官方规范

本页工具遵循W3C CSS自定义变量的标准语法，生成规则符合前端开发通用命名规范，所有输出结果均经过程序校验，由工具集开发编辑组维护。