Color Token Generator

Por que todos os sistemas de design precisam de uma escala de cor

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

Uma escala de 11 níveis bem construída resolve isto: os níveis claros (50–200) servem para superfícies e fundos matizados, os níveis médios (300–600) suportam elementos interativos como botões, ligações e anéis de foco, e os níveis escuros (700–950) gerem texto e bordas de alto contraste. Cada decisão remete para a escala, e alterar a cor de marca significa atualizar um valor base em vez de procurar centenas de códigos hex numa 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 níveis — 50, 100, 200 até 900, 950 — e foi desde então adotada como padrão pelo Radix UI, shadcn/ui, Material Design 3 e a maioria dos ecossistemas de bibliotecas de componentes modernos. A vantagem é a previsibilidade: um programador que tenha usado qualquer um destes sistemas sabe imediatamente que um token de nível 500 é a cor base de gama média, um token de nível 100 é um matiz muito claro e um token de nível 800 é um tom escuro para usar sobre fundos claros.

Esta ferramenta gera escalas visualmente compatíveis com as paletas integradas do Tailwind (azul, vermelho, verde, etc.), facilitando a adição de uma cor de marca personalizada que se integre naturalmente com os valores predefinidos 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.

Compreender os rácios de contraste WCAG

O rácio de contraste entre uma cor de texto e o seu fundo é calculado a partir da 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 requer 4.5:1 para texto normal e 3:1 para texto grande (18pt+). WCAG AAA requer 7:1 para texto normal. Nesta ferramenta, os rácios de contraste de texto branco e preto de cada amostra são calculados e apresentados como emblemas W✓ e B✓. Os níveis de escala média (400–600) normalmente falham ambos os limiares — são concebidos para preenchimentos decorativos e acentos interativos, não para fundos de texto.

Espaços de cor: HSL, OKLCH e a sua importância

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 grande salto para o azul mas um pequeno passo 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 esta razão. Para um gerador de paletas, o OKLCH produz escalas onde cada nível genuinamente parece um passo uniforme para mais claro ou mais escuro — especialmente valioso para design de paletas acessíveis.

Exportar 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 cai diretamente em theme.extend.colors em tailwind.config.js — renomeie 'color' para o seu nome de token (p.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 produzem os mesmos 11 valores hex, pelo que mudar entre eles após a geração não requer alterações. Clique em qualquer amostra individual para copiar o seu valor hex diretamente para a área de transferência — útil quando precisa de um tom específico para um ficheiro de design 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 concebida para gerar combinações aleatórias de 5 cores. É excelente para inspiração, mas não produz escalas de tokens, não gera configurações do Tailwind e não mostra emblemas 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 guardar 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 níveis (sem o nível 50) e foi concebida especificamente para tematização Material Design — o resultado não mapeia facilmente para Tailwind ou outros ecossistemas.

Esta ferramenta gera uma escala completa de 11 níveis, mostra emblemas WCAG W✓/B✓ em cada amostra, exporta para quatro formatos e não requer início de sessão. Tudo corre no seu navegador — nenhum dado de cor é enviado para um servidor.