Gerador de Tons de Cores

Crie rampas de cor uniformes a partir de qualquer HEX. 4-16 tons e matizes com verificação de contraste WCAG (AA/AAA) ao vivo. 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 e constrói uma rampa de tons (mais escuros, misturados em direção ao preto) e matizes (mais claros, misturados em direção ao branco) em sRGB, depois mapeada em uma escala de nomes 50-950. Cada amostra exibe sua relação de contraste WCAG 2.1 ao vivo contra branco puro e preto puro com selos AA/AAA de aprovado ou reprovado, para você escolher combinações seguras de texto sobre cor antes de publicar seus tokens. 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 rampeamento perceptualmente uniforme OKLCH e a entrada HSL/OKLCH estão no roadmap.)

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 — Crie rampas de cor uniformes a partir de qualquer HEX. 4-16 tons e matizes com verificação de contraste WCAG (AA/AAA) ao — **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. Esta ferramenta atualmente mistura os tons em direção ao preto e os matizes em direção ao branco em sRGB, o que é rápido e previsível mas não estritamente uniforme em termos perceptuais; o rampeamento OKLCH é uma melhoria planejada. Se você precisa de uma rampa perfeitamente uniforme hoje, cole os valores HEX exportados em um editor OKLCH. O suporte de navegador para OKLCH já é sólido (Chrome 111+, Safari 16.4+, Firefox 113+).

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. Cada amostra desta ferramenta exibe dois selos ao vivo — sua relação de contraste contra branco puro (W) e preto puro (B), cada um rotulado AAA, AA, AA Large ou Fail — calculada com a fórmula exata de luminância relativa WCAG (linearização sRGB, depois (L1+0.05)/(L2+0.05)). Geralmente passos 50-300 servem como fundos para texto escuro, passos 700-950 como fundos para 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, e o selo indicará isso.