Gerador de Tons de Cores

Gere rampas de cor perceptualmente uniformes a partir de qualquer HEX, OKLCH ou HSL. 5-16 tons, matizes, pares dark mode. Exporte CSS, JSON, Tailwind.

Tem feedback? Reporte bugs, sugira recursos ou compartilhe suas ideias — lemos todos

Gerador de Tons de Cores - Construa Escalas de Tons para Sua Marca

Sistemas de design modernos operam sobre escalas de tom consistentes — as escalas estruturadas 50-100-200...900-950 que Tailwind, Material 3, Radix e Stripe Atlas usam para expressar a mesma cor em diferentes níveis de luminosidade. Este gerador recebe uma cor base HEX, OKLCH ou HSL e constrói uma rampa uniformemente espaçada de tons (mais escuros) e matizes (mais claros) usando matemática perceptual de cor, para que cada passo pareça uma mudança de luminosidade igual ao olho humano. A saída está pronta para botões, estados hover, paletas de gráficos, pares de modo escuro e provas de impressão — exporte como CSS custom properties, tokens JSON de design ou trecho tailwind.config.js.

O que são tons e matizes?

Matizes misturam uma cor com branco para criar resultados mais claros, enquanto tons mesclam com preto para valores mais escuros. Escalas equilibradas fornecem flexibilidade para estados de hover, sombras, fundos de cartões e destaques de gráficos sem adivinhar porcentagens.

Como usar este gerador?

1) Insira ou escolha uma cor HEX base. 2) Defina total de amostras ou ajuste quantos matizes e tons você precisa. 3) Clique em Gerar para atualizar a visualização. 4) Copie qualquer amostra, ou exporte variáveis CSS, JSON ou configuração Tailwind para adicionar em seu projeto.

Por que exportar em múltiplos formatos?

Equipes diferentes preferem pipelines diferentes. Variáveis CSS se encaixam diretamente em folhas de estilo, JSON funciona para tokens ou plugins Figma, e configuração Tailwind se integra com projetos modernos utility-first.

Quantos passos minha rampa de cor deve ter?

A maioria dos sistemas de design fica em 9-11 passos porque atinge um ponto ideal: variação suficiente para primário, hover, foco, ativo e estados desabilitados além de fundos claros/escuros e bordas, sem inchar seu arquivo de tokens. Tailwind entrega 11 passos (50, 100, 200, ..., 900, 950); Material 3 entrega 13 tons (0-100 em incrementos de 5 ou 10); IBM Carbon entrega 11; Radix entrega 12. Menos de 6 passos geralmente deixa você improvisando cores durante a implementação; mais de 13 desperdiça tokens que ninguém usará. Escolha 11 a menos que tenha razão específica para maior densidade.

Gerador de Tons de Cores — Gere rampas de cor perceptualmente uniformes a partir de qualquer HEX, OKLCH ou HSL. 5-16 tons, matizes, pares dark mode — **Gerador de Tons de Cores**

Por que meu tom do meio não parece a cor base?

Em escalas estilo Tailwind, o passo 500 é o ponto médio perceptual da rampa, não sua cor literal de marca. Se sua entrada é um vermelho de marca vivo e saturado, o algoritmo o centraliza em uma faixa de luminosidade 0-100 — o que frequentemente significa que a cor de marca cai em 600 ou 700, não em 500, porque marcas tipicamente escolhem cores que se situam mais escuras que o cinza médio perceptual para contraste contra branco. Para ancorar sua marca literal exatamente no passo 500, aumente a luminosidade da sua cor de entrada ou use uma ferramenta que permita fixar um passo personalizado.

O que é OKLCH e por que cor perceptual importa?

OKLCH (Oklab em forma cilíndrica Luminosidade/Croma/Matiz, introduzido por Bjorn Ottosson em 2020 e enviado em CSS Color Module Level 4) é um espaço de cor perceptualmente uniforme: mudanças numéricas iguais parecem iguais ao olho humano. HSL — o modelo de conveniência mais antigo — não é uniforme; um passo de luminosidade HSL de 10 unidades parece minúsculo em amarelos mas enorme em azuis, razão pela qual rampas geradas em HSL sentem-se desiguais. Gerar tons e matizes em OKLCH (depois converter para HEX na saída) dá uma rampa onde o contraste passo a passo parece consistente em toda a roda de cores. O suporte de navegador agora é sólido (Chrome 111+, Safari 16.4+, Firefox 113+), então OKLCH é o padrão moderno para sistemas de cor sérios.

Como garanto acessibilidade (contraste WCAG AA)?

WCAG 2.1 exige que texto de corpo tenha relação de contraste 4.5:1 contra seu fundo (AA), ou 3:1 para texto 18pt+ ou negrito 14pt+ (AA Large), ou 7:1 para AAA. Esta ferramenta mostra a relação de contraste de cada amostra contra branco puro e preto puro, para você escolher cores de texto que passem. Geralmente passos 50-300 devem ser usados para fundos com texto escuro, passos 700-950 para fundos com texto claro, e passos 400-600 falham em ambas direções em texto de corpo (use-os apenas para texto de display grande ou elementos de UI não-textuais como bordas e divisores). Azuis vivos são particularmente complicados — mesmo o passo 500 de um azul brilhante frequentemente falha AA em branco.