Gerador de Tons Claros e Escuros
Cor
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
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.