ToolNext

Gerador de Design Tokens

Gere design tokens CSS/JS completos a partir de uma cor

50
100
200
300
400
500
600
700
800
900
950
  --color-brand-50: #f1f1fe;
  --color-brand-100: #e3e4fc;
  --color-brand-200: #c9c9f8;
  --color-brand-300: #9d9ef1;
  --color-brand-400: #6568e6;
  --color-brand-500: #080cf7;
  --color-brand-600: #0407c8;
  --color-brand-700: #0204a2;
  --color-brand-800: #00027a;
  --color-brand-900: #000152;
  --color-brand-950: #000133;

工具说明

Insira uma cor de marca principal para gerar automaticamente um conjunto completo de design tokens de cor com tons 50–950, variantes para modo escuro, variáveis CSS, configuração Tailwind e saída JSON.

design tokencolor色阶tailwindcss variable设计系统