CSS 颜色变量生成器本地处理 · 0 次网络请求

把颜色列表（HEX / rgb() / hsl()）转成 :root{--name: ...} 声明；可生成 Sass 变量，并按需附加深浅变体。

颜色列表
OUTPUT

  







等待输入




  
CSS 变量怎么用？

  
把右侧输出的 :root { ... } 整段贴到你的全局 CSS 顶部，后面在样式里用 var(--color-1) 引用。开启「深浅变体」会自动生成 --color-1-dark / --color-1-light，做按钮 hover / 阴影叠色非常方便。

  
相关工具：随机颜色生成器Tailwind 转换颜色格式转换






页面更新： · 本地处理与使用边界