logoColorTinder

设计令牌生成器

创建多色设计令牌色阶,导出为CSS变量、Tailwind配置、SCSS、JSON或Figma令牌。

Color Scales

brand

:root {
  --brand-50: #f7f5ff;
  --brand-100: #ede8fe;
  --brand-200: #dad2fc;
  --brand-300: #beb3fa;
  --brand-400: #998ff6;
  --brand-500: #6366f1;
  --brand-600: #4e52bc;
  --brand-700: #3c408d;
  --brand-800: #2d3269;
  --brand-900: #21264a;
  --brand-950: #191f38;
}

常见问题

什么是设计令牌?

设计令牌是构成设计系统基础的命名颜色值,便于统一管理和更新颜色。

可以添加多个颜色色阶吗?

可以——点击'添加'添加更多色阶。每个色阶都有11级步骤。

什么是Figma令牌格式?

Figma格式输出与Figma Tokens插件兼容的JSON结构。