Resposta direta
Um gerador de tokens de cor serializa o sistema de cores revisado em propriedades CSS personalizadas, blocos @theme do Tailwind CSS v4 e JSON DTCG para que o código reflita exatamente a prévia visual.
Como usar esta ferramenta
Acesse a etapa de tokens
Abra o gerador de tokens ou continue a partir do verificador com o mesmo documento de cores local.
Escolha o formato de saída
Selecione variáveis CSS, Tailwind v4 @theme ou JSON DTCG. Cada formato espelha com precisão as primitivas e aliases revisados.
Copie ou baixe o arquivo
Copie para a área de transferência ou baixe o artefato. As saídas incluem alternativas sRGB determinísticas para cores de gamut estendido.
Projeção fiel de artefatos e compatibilidade
Os tokens exportados representam com exatidão o sistema revisado: escalas primitivas, aliases semânticos e temas claro/escuro. Cores modernas de gamut amplo contam com fallbacks perceptuais em sRGB para evitar distorções em telas comuns.
- Exportações em CSS, Tailwind e DTCG mantêm consistência estrita com a mesma versão do documento.
- Sem necessidade de armazenamento em servidores remotos ou criação de contas.
- Cópia e download oferecem alternativas seguras caso APIs avançadas do navegador não estejam disponíveis.
Exemplos práticos
Exportar escala Primary para Tailwind @theme
Entrada: Escala Primary 50–950 revisada + papéis primary/on-primary
Saída: @theme { --color-primary-500: oklch(...); --color-primary: var(--color-primary-500); }
Gera variáveis prontas para uso em frameworks modernos sem erros de transcrição manual.
Limitações
- Não sincroniza diretamente com softwares remotos de design; copie ou faça o download dos arquivos localmente.
- Se sua ferramenta utiliza dialetos proprietários, mapeie os aliases DTCG no seu próprio fluxo de build.
Perguntas frequentes
As exportações correspondem aos valores vistos no verificador?
Sim. Os arquivos são gerados a partir do mesmo documento exibido na visualização, impedindo desvios na entrega.
Os tokens são enviados para algum servidor externo?
Não. Todo o processo de serialização, cópia e download acontece no seu navegador. Links de compartilhamento guardam o estado apenas no hash.
Posso retornar ao construtor sem perder meus tokens?
Sim. A troca de etapas preserva o documento; gerar artefatos novamente após ajustes usará a versão atualizada.
Referências e normas oficiais
- W3C CSS Color Module Level 4 ↗ — Modern color functions serialized into CSS custom properties with sRGB fallbacks.
- W3C Relative Luminance Definition & Formula ↗ — Luminance guidance for documenting accessible token pairs in exported artifacts.