Gerador de tons de cor

O que é Gerador de tons de cor?

O Gerador de tons de cor é uma ferramenta on-line gratuita que transforma uma cor HEX base em uma escala completa de matizes e tons, numerada de 50, 100, 200 até 900 e 950, igual aos tokens de cor do Tailwind CSS. Ele constrói a rampa mesclando linearmente sua cor base para o branco nos passos claros (50-400) e para o preto nos passos escuros (600-950), mantendo o 500 como a própria cor base. Designers e desenvolvedores front-end a usam para gerar uma escala de cor consistente para um design system, configurar propriedades personalizadas de CSS ou cores de tema do Tailwind, e escolher variantes claras/escuras acessíveis de uma cor de marca. Cada passo é exibido como uma amostra ao lado do seu valor HEX com um botão de cópia em 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 do seletor de cor para escolhê-la visualmente.
2. A escala 50-950 é atualizada na hora: os matizes claros (50-400) são mesclados para o branco, o 500 é sua cor base, e os tons escuros (600-950) são mesclados para o preto.
3. Leia cada linha para ver, lado a lado, o número do passo (50 … 950), sua amostra de cor e seu valor HEX.
4. Clique no botão de copiar no fim de qualquer linha para copiar o valor HEX daquele passo para a área de transferência.
5. Copie o HEX da cor base com o botão de copiar ao lado do campo de entrada sempre que precisar apenas do passo 500.

Exemplos

#4f86f7

#f6f9ff

#4f86f7

#0b1323

Perguntas frequentes

Quais formatos de cor posso inserir?

A cor base é inserida como um valor HEX no formato #rrggbb (seis dígitos) ou na forma abreviada #rgb (três dígitos). Se o valor não for uma cor HEX válida, a mensagem 'Invalid HEX color' aparece e nenhuma escala é gerada. Cada passo da saída é exibido como um valor HEX #rrggbb.

Como os tons são calculados?

Cada passo é uma mistura linear entre sua cor base e o branco puro ou o preto puro. Os passos 50-400 são mesclados para o branco em proporções decrescentes, o passo 500 é a cor base sem alteração, e os passos 600-950 são mesclados para o preto em proporções crescentes. A numeração corresponde às escalas de cor do Tailwind CSS.

Por que o passo 500 às vezes não é exatamente o número da minha cor base?

O passo 500 é sempre exatamente a sua cor base. A ferramenta não recentraliza sua cor sobre uma curva de luminosidade perceptual, então, se a sua entrada for muito clara ou muito escura, a metade clara ou escura da escala terá menos amplitude — escolha uma base de tom médio para a rampa mais uniforme.

Posso escolher uma cor visualmente em vez de digitar o HEX?

Sim. Clique na amostra grande com o seletor de cor embutido para escolher uma cor; o campo HEX é atualizado automaticamente e toda a escala 50-950 é recalculada na hora à medida que você a altera.

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

Não. Tudo é executado inteiramente no seu navegador usando matemática de cor local — nenhum valor de cor é jamais enviado a um servidor, então funciona off-line e mantém sua paleta privada.