Diferença entre tom, matiz e tonalidade?

Um tom (shade) adiciona preto à base (mais escuro, mesma matiz). Um matiz (tint) adiciona branco (mais claro, mesma matiz). Uma tonalidade (tone) adiciona cinza (menos saturada, mesma matiz e luminosidade). Este gerador emite tons e matizes porque é o que os design systems usam - uma rampa de tonalidades raramente é o que se procura.

Por que a escala 50/100…950?

Casa com o Tailwind CSS e a maioria dos design tokens, onde 500 é aproximadamente a base, 50 é quase branco e 950 quase preto. Manter a mesma numeração faz com que quem ler seus design tokens entenda na hora o peso relativo. Material usa 50/100/200…900; Tailwind estende com 950 para um preto mais profundo.

A rampa garante passos perceptivamente uniformes?

Não - este gerador interpola em HSL, mais rápido e nativo do CSS, mas não perceptivamente uniforme. Os passos centrais (200-700) costumam parecer regulares; os extremos (50, 950) se comprimem visualmente. Para uma rampa perceptivamente uniforme, gere em OKLCH ou LCH - design tokens recentes (Tailwind v4, Radix Colors) fazem exatamente isso.

Como exporto a rampa como variáveis CSS?

Clique em «Copiar como CSS». A saída é um bloco de linhas `--brand-50: #...; --brand-100: #...;` para colar no seu `:root` ou num config do Tailwind. Renomeie o prefixo no campo para combinar com seu namespace (`--primary`, `--accent`, etc.) antes de copiar.

O tom 500 bate exatamente com minha entrada?

Sim - o 500 é a sua cor de entrada sem mudança. Os passos mais claros (50-400) são misturas progressivas em direção ao branco, os mais escuros (600-950) em direção ao preto. Se a base for muito escura ou muito clara, a rampa pode parecer assimétrica - aproxime a base de 50 % de luminosidade e gere de novo.

Gerador de tons de cor

Gere 10 tons e 10 matizes de qualquer cor - pronto em lista hex ou variáveis CSS.

Cor base

Prefixo variável CSS

Rampa de tons

Introduza uma cor hex (ex. #3b82f6) para gerar tons.

Propriedades CSS personalizadas

Digite um hex; receba uma rampa de 21 passos. Os matizes (base misturada com branco) sobem à esquerda, os tons (misturados com preto) descem à direita, e a base fica no meio. A saída segue a escala 50/100/200…900/950 que Tailwind, Material e a maioria dos design systems modernos usam. Clique numa amostra para copiar o hex, ou exporte toda a rampa como propriedades CSS.

Como usar

Escolha a base
Use o seletor ou cole um hex. A rampa completa recalcula na hora.
Inspecione as amostras
Cada amostra mostra o número do token (50-950) e o hex. Clique para copiar o hex.
Renomeie o prefixo
Troque `--brand` pelo seu namespace de tokens (`--primary`, `--accent`, etc.) para o CSS exportado seguir suas convenções.
Copie como CSS
Clique em «Copiar como CSS» e cole o bloco completo de propriedades personalizadas direto na sua folha de estilos ou no config do Tailwind.

O que é?

Um gerador de tons pega uma cor base e produz uma rampa graduada de variantes mais claras (matizes) e mais escuras (tons). A saída é o tipo de tabela de amostras que aparece em um design system como Tailwind ou Material - uma escala numerada (50, 100, 200, …, 900, 950) em que cada passo ajusta a luminosidade mantendo o matiz. Designers usam essas rampas para construir hierarquias de texto/fundo, estados hover, estados desabilitados e paletas de gráficos a partir de uma única cor de marca.

Quando usar

Construir um design system a partir de uma única cor de marca, gerar variantes hover/active de uma primária, criar um conjunto coeso de cinzas para texto e fundo, povoar o config do Tailwind com uma paleta personalizada, esboçar cores de séries de gráficos com passos regulares e dar aos devs uma rampa padrão antes de um designer afinar cada amostra.

Erros comuns

Usar uma amostra 50 ou 950 para texto sem checar contraste - costumam reprovar no WCAG sobre fundos tingidos. Tratar a rampa gerada como final - é ponto de partida; a faixa 300-700 geralmente quer ajuste manual. Escolher uma base já muito escura ou muito clara - a rampa comprime em uma ponta, e metade dos passos vira indistinguível.

FAQ

Diferença entre tom, matiz e tonalidade?: Um tom (shade) adiciona preto à base (mais escuro, mesma matiz). Um matiz (tint) adiciona branco (mais claro, mesma matiz). Uma tonalidade (tone) adiciona cinza (menos saturada, mesma matiz e luminosidade). Este gerador emite tons e matizes porque é o que os design systems usam - uma rampa de tonalidades raramente é o que se procura.
Por que a escala 50/100…950?: Casa com o Tailwind CSS e a maioria dos design tokens, onde 500 é aproximadamente a base, 50 é quase branco e 950 quase preto. Manter a mesma numeração faz com que quem ler seus design tokens entenda na hora o peso relativo. Material usa 50/100/200…900; Tailwind estende com 950 para um preto mais profundo.
A rampa garante passos perceptivamente uniformes?: Não - este gerador interpola em HSL, mais rápido e nativo do CSS, mas não perceptivamente uniforme. Os passos centrais (200-700) costumam parecer regulares; os extremos (50, 950) se comprimem visualmente. Para uma rampa perceptivamente uniforme, gere em OKLCH ou LCH - design tokens recentes (Tailwind v4, Radix Colors) fazem exatamente isso.
Como exporto a rampa como variáveis CSS?: Clique em «Copiar como CSS». A saída é um bloco de linhas `--brand-50: #...; --brand-100: #...;` para colar no seu `:root` ou num config do Tailwind. Renomeie o prefixo no campo para combinar com seu namespace (`--primary`, `--accent`, etc.) antes de copiar.
O tom 500 bate exatamente com minha entrada?: Sim - o 500 é a sua cor de entrada sem mudança. Os passos mais claros (50-400) são misturas progressivas em direção ao branco, os mais escuros (600-950) em direção ao preto. Se a base for muito escura ou muito clara, a rampa pode parecer assimétrica - aproxime a base de 50 % de luminosidade e gere de novo.