颜色令牌生成器

Color Naming & Token Generator

为颜色统一命名并同步生成 CSS、JS、SCSS 三种格式的设计令牌代码。

颜色令牌

:root {
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-text-primary: #0F172A;
}

加载中…

关于此工具与使用指南

理解原理 · 操作场景 · 隐私说明

颜色令牌生成器帮助你为一组颜色进行语义化命名，并将同一份颜色数据同步输出为 CSS 变量、JavaScript 对象与 SCSS 变量，保证多端样式令牌一致。

核心特性

✓一处维护：增删改颜色令牌，三种格式同步更新
✓自动命名规范化：名称自动转换为 kebab-case、camelCase 等格式
✓三种输出：CSS 自定义属性、JS / TS 对象、SCSS 变量
✓语义化默认令牌：内置 primary、success、warning 等常用令牌

探索相关协同工具

查看全部工具→

调色板与 WCAG 对比度检查

智能生成色阶渐变，精确计算文字与背景的 WCAG 2.1 无障碍对比度（AA/AAA）。

图片调色板提取器

上传图片自动提取主色调，基于中位切分量化算法生成调色板，一键复制 CSS 变量。

渐变色生成器

可视化调节线性、径向、圆锥渐变与颜色节点，实时预览并输出 CSS 与 Tailwind 代码。