Gerador de tons de cor

O que é Gerador de tons de cor?

O Gerador de tons de cor transforma uma cor HEX base em uma escala completa de matizes e tons pronta para um design system. Em vez de misturar apenas de forma linear em RGB, ele pode interpolar em OKLCH ou HSL para que o matiz fique estável e a luminosidade seja distribuída por igual, dando uma rampa perceptualmente equilibrada sem passos apagados ou lavados. Você escolhe quantos passos ele gera — de 2 a 24, ou uma lista personalizada de rótulos separados por vírgula —, desloca o matiz ou escala a saturação, e lê uma dica de contraste WCAG por passo mostrando quais tons funcionam como texto no branco e no preto. A escala pronta é copiada como propriedades personalizadas de CSS, um objeto de configuração de cor do Tailwind ou JSON com um clique.

Como usar Gerador de tons de cor

1. Digite uma cor base no campo Cor base (HEX) no formato #rrggbb ou #rgb, ou clique na amostra grande para escolhê-la visualmente.
2. Escolha um espaço de cor: OKLCH ou HSL para uma rampa perceptualmente uniforme com matiz estável, ou RGB para a mistura linear clássica.
3. Defina quantos passos você quer (2–24), ou abra as Configurações para inserir uma lista de passos personalizada separada por vírgula, deslocar o matiz, escalar a saturação e definir o nome de cor da exportação.
4. Leia as duas células de contraste de cada linha — a letra A no branco e no preto —, destacadas quando aquele tom atinge o WCAG AA para texto.
5. Copie o HEX de um único passo, ou copie toda a escala como variáveis CSS, uma configuração do Tailwind ou JSON com os botões de copiar.

Exemplos

Perguntas frequentes

Qual é a diferença entre as opções RGB, HSL e OKLCH?

RGB mistura sua cor linearmente para o branco e o preto, o que é rápido mas pode parecer irregular nos meios-tons. HSL e OKLCH, em vez disso, mantêm o matiz estável e distribuem a luminosidade por igual; OKLCH é perceptualmente uniforme, então cada passo parece um salto de brilho idêntico. Escolha OKLCH para a rampa mais equilibrada.

Quantos tons posso gerar e posso nomeá-los?

Defina qualquer contagem de passos de 2 a 24. Um valor de 11 usa a numeração conhecida do Tailwind (50, 100…900, 950); outros valores são distribuídos por igual de 50 a 950. Você também pode digitar nas Configurações uma lista personalizada de rótulos separados por vírgula, que substitui a contagem e nomeia cada passo exatamente como você escreve.

Como a dica de contraste WCAG é calculada?

Para cada tom, a ferramenta calcula a razão de contraste WCAG contra o branco puro e o preto puro a partir da luminância relativa. As duas pequenas células de cada linha mostram a letra A no branco e no preto e são destacadas quando a razão chega a 4.5:1 (AA para texto normal); passe o cursor para ver a razão exata e se é AA ou AAA.

Meus dados de cor são enviados para algum lugar?

Não. A matemática de cor, as verificações de contraste e as três exportações são executadas inteiramente no seu navegador, então nenhum valor de cor é enviado a um servidor. Funciona off-line e mantém sua paleta privada.