Tons e Sombras
O gerador de tons claros e escuros cria versões mais claras (misturadas com branco) e mais escuras (misturadas com preto) de qualquer cor base em 5, 10 ou 20 etapas, com saída em variáveis CSS.
Sobre esta ferramenta
O gerador de tons claros e escuros cria versões mais claras (misturadas com branco) e mais escuras (misturadas com preto) de qualquer cor base em 5, 10 ou 20 etapas, com saída em variáveis CSS.
Como usar
- Escolha uma cor base.
- Escolha 5, 10 ou 20 etapas.
- Clique em qualquer amostra para copiar o valor hex.
- Clique em Copiar como variáveis CSS para exportar a escala inteira.
Bom saber
- Um tom claro (tint) é uma cor misturada com branco; um tom escuro (shade) é uma cor misturada com preto.
- O gerador mistura em etapas RGB iguais, então cada etapa muda a cor na mesma proporção.
- Design systems como o Tailwind usam uma escala de 50–900 construída com tons claros e escuros de cada cor da marca.
- Verifique o contraste das cores de texto tiradas de uma escala, porque as etapas intermediárias muitas vezes falham no WCAG AA sobre branco.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Qual a diferença entre tint e shade?
Um tint clareia uma cor adicionando branco; um shade a escurece adicionando preto. Um tone adiciona cinza.
Quantos tons uma cor de design system deve ter?
Cerca de 10 etapas é o comum, por exemplo 50, 100 … 900 no Tailwind. Isso dá variação suficiente para fundos, bordas, texto e estados de hover.
Como uso a escala em CSS?
Copie a escala como propriedades personalizadas e use-as com var(--color-name), por exemplo em fundos, bordas ou estados de hover.
Por que alguns tons claros parecem desbotados?
Misturar com branco reduz a saturação além de aumentar a luminosidade. Para variações claras mais vivas, ajuste a saturação separadamente em HSL.