Prefixar evita colisões e deixa intenção clara. `--color-primary` lê melhor que `--primary` quando você também tem tokens de espaçamento, raio etc. Para Tailwind o prefixo vira a chave sob `extend` — `extend.colors` é a convenção padrão Tailwind, mas você pode querer `extend.brand` ou `extend.surface` para paletas escopadas.

O JSON de Design Tokens combina com spec W3C?

Quase. Usa `{ value, type: 'color' }` por token, que combina com o draft do Design Tokens Community Group. Para conformidade estrita W3C você pode precisar aninhar tokens sob objeto grupo — mas a maioria das ferramentas (Style Dictionary, Specify, Cobalt) lida com o formato plano bem e roda suas próprias transformações.

Exportador de Tokens de Cor

Cor

Uma fonte única de verdade para uma paleta de cores, com exportação em um clique para qualquer stack que você esteja enviando. Adicione tokens por nome e hex (3, 6 ou 8 dígitos), escolha um prefixo (`color`, `brand`, `surface` etc.), e a saída se regenera no formato escolhido. CSS dá custom properties `--color-primary` sob `:root`. Tailwind dá um bloco `theme.extend.colors` que você cola em `tailwind.config.js`. SCSS dá tanto variáveis `$color-primary` quanto um map `$colors` para `map.get`. JSON segue o formato `{ value, type }` do Design Tokens Community Group. iOS dá uma extensão SwiftUI `Color`; Android dá o formato de recurso `colors.xml` com underscores. Presets te começam com marca, escala neutra ou cores de status.

—

PrefixoFormato de saída

Preset:

Tokens

Pré-visualização

primary

primary-hover

surface

surface-muted

text

text-muted

border

danger

Saída

:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-danger: #ef4444;
}

Nomes são sanitizados para kebab-case. Hex auto-expande #abc → #aabbcc.

Como usar

Escolha um preset, ou construa sua paleta do zero. Nomes são sanitizados para `kebab-case`.
Defina um prefixo que faça sentido para seu stack: `color` para CSS, `colors` (ou deixe em branco) para Tailwind, nenhum para SCSS se quiser `$primary` puro.
Troque formato. Copie. Cole na sua folha de estilo, arquivo de tema ou catálogo de assets.

Perguntas frequentes

Por que prefixo?: Prefixar evita colisões e deixa intenção clara. `--color-primary` lê melhor que `--primary` quando você também tem tokens de espaçamento, raio etc. Para Tailwind o prefixo vira a chave sob `extend` — `extend.colors` é a convenção padrão Tailwind, mas você pode querer `extend.brand` ou `extend.surface` para paletas escopadas.
O JSON de Design Tokens combina com spec W3C?: Quase. Usa `{ value, type: 'color' }` por token, que combina com o draft do Design Tokens Community Group. Para conformidade estrita W3C você pode precisar aninhar tokens sob objeto grupo — mas a maioria das ferramentas (Style Dictionary, Specify, Cobalt) lida com o formato plano bem e roda suas próprias transformações.