Color Token Generator

Por que todo sistema de design precisa de uma escala de cor

Uma escala de cor é a espinha dorsal de uma linguagem visual consistente. Sem ela, designers e desenvolvedores tomam decisões ad hoc — 'um azul um pouco mais escuro para o hover' ou 'uma versão bem clara para o fundo do card' — que produzem dezenas de valores hexadecimais quase idênticos sem nenhuma relação sistemática. Com o tempo, isso cria um código cheio de valores de cor únicos impossíveis de atualizar de uma vez só.

Uma escala de 11 stops bem construída resolve isso: os stops claros (50–200) servem para superfícies e fundos com matiz, os stops médios (300–600) sustentam elementos interativos como botões, links e anéis de foco, e os stops escuros (700–950) lidam com texto e bordas de alto contraste. Cada decisão remete à escala, e mudar a cor da marca significa atualizar um valor base em vez de procurar centenas de códigos hex em uma folha de estilos.

A convenção de escala de cor do Tailwind

O Tailwind CSS popularizou a convenção de nomenclatura numérica de 11 stops — 50, 100, 200 até 900, 950 — e foi adotada como padrão pelo Radix UI, shadcn/ui, Material Design 3 e a maioria dos ecossistemas de bibliotecas de componentes modernas. A vantagem é a previsibilidade: um desenvolvedor que usou qualquer um desses sistemas sabe imediatamente que um token nível 500 é a cor base do meio, um token nível 100 é um matiz bem claro e um token nível 800 é um tom escuro para usar sobre fundos claros.

Essa ferramenta gera escalas visualmente compatíveis com as paletas embutidas do Tailwind (azul, vermelho, verde, etc.), facilitando a adição de uma cor de marca personalizada que se integre naturalmente com os padrões do Tailwind. O formato de exportação do Tailwind corresponde exatamente ao que theme.extend.colors espera em tailwind.config.js, e a exportação de Variáveis CSS está formatada para o bloco @theme do Tailwind v4.

Entendendo as taxas de contraste WCAG

A taxa de contraste entre uma cor de texto e seu fundo é calculada a partir de sua luminância relativa — uma medida do brilho aparente de cada cor ao olho humano. A fórmula WCAG é (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara e L2 a da mais escura. O resultado varia de 1:1 (cores idênticas, sem contraste) a 21:1 (texto preto sobre fundo branco, contraste máximo).

WCAG AA exige 4.5:1 para texto normal e 3:1 para texto grande (18pt+). WCAG AAA exige 7:1 para texto normal. Nessa ferramenta, as taxas de contraste de texto branco e preto de cada amostra são calculadas e exibidas como selos W✓ e B✓. Os stops de escala média (400–600) geralmente falham nos dois limites — são projetados para preenchimentos decorativos e destaques interativos, não para fundos de texto.

Espaços de cor: HSL, OKLCH e por que isso importa

Os geradores de paletas tradicionais trabalham em HSL — Matiz, Saturação, Luminosidade. O HSL é intuitivo e bem suportado, mas perceptualmente não uniforme: o mesmo passo numérico de luminosidade parece dramaticamente diferente dependendo do matiz. Um passo de 50% para 60% de luminosidade parece um salto grande para o azul, mas um passo pequeno para o amarelo, porque o olho humano percebe as cores de forma diferente em todo o espectro.

OKLCH é um espaço de cor perceptualmente uniforme onde passos numéricos iguais de luminosidade parecem iguais ao olho humano independentemente do matiz. O Tailwind CSS v4 mudou para OKLCH internamente por esse motivo. Para um gerador de paletas, o OKLCH produz escalas onde cada stop genuinamente parece um passo uniforme para mais claro ou mais escuro — especialmente valioso para design de paletas acessíveis.

Exportando para CSS, Tailwind, SCSS, JSON e DTCG

A exportação de Variáveis CSS usa o padrão de nomenclatura --color-N dentro de :root { }. A exportação do Tailwind vai direto para theme.extend.colors em tailwind.config.js — renomeie 'color' para o seu nome de token (ex.: 'primary' ou 'brand'). A exportação SCSS usa a sintaxe de variável $color-N compatível com Sass e Less. A exportação JSON segue o formato de token DTCG W3C e é compatível com Style Dictionary, Theo, Supernova e qualquer ferramenta no ecossistema moderno de pipeline de tokens.

Todos os quatro formatos geram os mesmos 11 valores hex, então mudar entre eles após a geração não requer alterações. Clique em qualquer amostra individual para copiar seu valor hex direto para a área de transferência — útil quando você precisa de um tom específico para um arquivo de design no Figma, um estilo inline pontual ou uma referência de cor rápida.

Comparação com Coolors, Adobe Color e Material Design Color Tool

Coolors.co é uma ferramenta de descoberta de paletas projetada para gerar combinações aleatórias de 5 cores. É ótima para inspiração, mas não produz escalas de tokens, não gera configs do Tailwind e não mostra selos de contraste WCAG por amostra.

Adobe Color oferece geração de harmonia de cores a partir de uma roda de cores e algumas opções de exportação, mas requer uma conta Adobe para salvar e exportar paletas. Não gera uma escala de cores compatível com Tailwind nem JSON DTCG.

A Material Design Color Tool do Google produz uma escala de 10 stops (sem o stop 50) e foi projetada especificamente para tematização Material Design — o resultado não mapeia bem para Tailwind ou outros ecossistemas.

Essa ferramenta gera uma escala completa de 11 stops, mostra selos WCAG W✓/B✓ em cada amostra, exporta para quatro formatos e não requer login. Tudo roda no seu navegador — nenhum dado de cor é enviado para um servidor.