Gerador de Tons Claros e Escuros
De uma cor de marca, designers geralmente precisam de uma rampa completa: tints claros pra estados hover e fundos, shades escuros pra texto e estados ativos. Esta ferramenta mistura sua cor base em direção ao branco (tints), preto (shades) ou cinza (tones) em passos uniformemente espaçados. Escolha a contagem (2–20), formato de saída (HEX, RGB, HSL) e copie qualquer amostra com clique. Útil pra construir escalas tipo Tailwind (50-900), estados de botão e paletas UI acessíveis.
Tints (mais claros)
Shades (mais escuros)
Clique em qualquer amostra pra copiar o valor. Tints úteis pra fundos e hover, shades pra texto e estados ativos.
Como usar
- Escolha a cor base — use o picker ou cole um valor HEX.
- Escolha modo: ambos (tints + shades), só tints, só shades ou tons (com cinza).
- Ajuste a contagem e formato, depois clique em qualquer amostra pra copiar.
Perguntas frequentes
- Diferença entre tint, shade e tone?
- Tint mistura com branco (mais claro), shade mistura com preto (mais escuro), tone mistura com cinza (mais suave). Os três mantêm a matiz mas mudam luminosidade/saturação diferente.
- É o mesmo que ajustar luminosidade HSL?
- Não — misturar em RGB em direção ao branco é perceptualmente diferente de aumentar luminosidade HSL. Mistura RGB pura reduz saturação enquanto clareia (mais 'pastel'), o que designers geralmente querem pra tints.
- Como mapeia pra escalas Tailwind 50–900?
- Gere ~9 tints e ~9 shades da sua base. O extremo claro aproxima o range 50–400, o escuro aproxima 600–900. As rampas exatas do Tailwind são ajustadas à mão pra uniformidade perceptual, então isso é ponto de partida — ajuste no olho.
- Por que os tints mais claros não são branco puro?
- Cada passo é uma fração do caminho até o branco. Com 10 passos, passo 1 está ~9% em direção ao branco. Pra branco puro precisaria de passos infinitos — mas o último passo geralmente é perto o suficiente pra um fundo 'mais claro'.
Ferramentas relacionadas
Gerador de Paleta de Cores
Escolha uma cor base, obtenha harmonias clássicas de roda de cores — complementar, split-complementar, triádica, tetrádica, quadrado, análoga, monocromática.
Paleta de Cores Tailwind
Paleta padrão completa do Tailwind CSS — 22 matizes × 11 tons, 50 até 950 — clique pra copiar como classe Tailwind, HEX ou rgb().
Paleta de Cor a partir de Imagem
Solte uma imagem e a ferramenta extrai uma paleta de cores dominantes via Canvas — copie HEX ou pegue o conjunto inteiro.
Ordenar Cores
Cole uma lista de cores hex e ordene por matiz, saturação, claridade ou brilho percebido — útil pra organizar uma paleta de tokens de design.
Paleta tonal Material Design 3
Gera uma paleta tonal Material You / Material Design 3 (tons 0–100) a partir de uma cor base, com contraste vs preto/branco e exportação CSS/Tailwind/JSON/SCSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.