Gerador de Tonalidades de Cores
Gere tonalidades mais claras e mais escuras a partir de qualquer cor base. Mesmo matiz e saturação, luminosidade variável — perfeito para sistemas de design, variáveis CSS e paletas estilo Tailwind. Copie hex, RGB, HSL ou um bloco completo de variáveis CSS.
#ECF3FE#C0D7FC#94BBFA#689FF8#3C83F6#0B5EE5#0844A6#052A66#021027Índice
O que são tonalidades de cores?
As tonalidades são variações de uma única cor criadas alterando apenas a luminosidade (em HSL). O matiz e a saturação permanecem iguais, então você obtém uma família consistente do muito claro ao muito escuro — ideal para fundos, bordas, texto e estados de hover em sistemas de design (ex. a escala 50–900 do Tailwind) ou variáveis CSS.
Ao contrário dos tintes (adicionar branco) ou tons (adicionar cinza), a geração de tonalidades via luminosidade HSL preserva a vivacidade da cor em toda a escala, evitando aquela aparência desbotada nas etapas mais claras.
Esta ferramenta coloca sua cor base no meio da escala e gera etapas mais claras e mais escuras. Você pode copiar valores individuais ou exportar o conjunto completo como propriedades personalizadas CSS.
Casos de uso
- Sistemas de design — Defina uma escala primária (ou secundária) uma vez e reutilize-a em todos os componentes.
- Paletas estilo Tailwind — Gere 9 ou 11 etapas (50–900) a partir de uma cor de marca.
- Variáveis CSS — Copie o bloco "Copiar como variáveis CSS" no seu :root para tematização instantânea.
- Acessibilidade — Use tonalidades mais claras para fundos e mais escuras para texto para atender às diretrizes de contraste.
Formatos de saída
Copie cores como:
- Hex — #EFF6FF, #DBEAFE, etc.
- RGB — rgb(239, 246, 255)
- HSL — hsl(214, 100%, 97%)
- Variáveis CSS — Bloco :root pronto para colar com --color-100, --color-200, etc.
Dicas para melhores resultados
- Comece com sua tonalidade 500 — Pense na sua cor base como o meio do intervalo, não a mais escura.
- Verifique o contraste cedo — Use tonalidades mais claras (50–200) para fundos com texto escuro; tonalidades mais escuras (700–900) garantem texto legível em fundos claros.
- Evite bases de preto/branco puro — Comece com cores que tenham alguma saturação (10%+) para escalas com aparência mais natural.
Perguntas frequentes
Mantemos o matiz e a saturação da sua cor base fixos e apenas alteramos a luminosidade em HSL. A cor base é colocada no meio; as etapas acima são mais claras (até 96% de luminosidade) e as etapas abaixo são mais escuras (até 8% de luminosidade), então você obtém uma progressão uniforme do claro ao escuro.
Sim. Escolha 9 tonalidades para obter uma escala similar à 100–900 do Tailwind (com rótulos 50–900). Copie os valores hex ou o bloco de variáveis CSS e insira-os na sua configuração do Tailwind ou CSS global.
3 tonalidades: Paleta mínima (claro, base, escuro). 5–7 tonalidades: Projetos simples com necessidades básicas de cores. 9 tonalidades: Padrão Material Design (100–900). 11 tonalidades: Padrão Tailwind (50–950) — Recomendado. 13–15 tonalidades: Granularidade máxima para sistemas de design complexos.
A luminosidade HSL funciona melhor com cores que têm saturação moderada (20–80%). Cores base muito saturadas ou muito dessaturadas podem precisar de ajuste manual. Tente ajustar ligeiramente a saturação da sua cor base se a escala parecer incorreta.
Não nesta ferramenta — ela é projetada para escalas matemáticas consistentes. Para ajuste manual, copie os valores hex para um seletor de cores ou ferramenta de design.
Não. Toda a geração é executada no seu navegador. Sua cor base e configurações são armazenadas apenas na URL (parâmetros de consulta) se você compartilhar o link; nada é enviado a um servidor.