Como Gerar Tons de Cor: Crie Paletas Consistentes a Partir de Uma Cor

Uma única cor de marca não é suficiente. Você precisa de versões mais claras para fundos e estados de hover, e versões mais escuras para texto, bordas e estados pressionados. Escolher manualmente cada passo é tedioso e muitas vezes inconsistente.

Tons de cor — variações de uma cor mudando apenas a luminosidade — oferecem uma escala completa e consistente a partir de uma única decisão. Aqui está como gerá-los e usá-los em sistemas de design, paletas no estilo Tailwind e CSS.

---

O Que São Tons de Cor?

Tons são variações de uma única cor feitas apenas mudando a luminosidade (em HSL). O matiz e a saturação permanecem os mesmos, então você obtém uma família coerente que vai do muito claro ao muito escuro.

Diferente de tintas (adicionando branco) ou tons (adicionando cinza), gerar tons via luminosidade HSL mantém o caráter da cor ao longo da escala e evita uma aparência desbotada nos passos mais claros.

Isso torna os tons ideais para:

• Escalas de sistemas de design (por exemplo, primary-50 até primary-900)
• Paletas no estilo Tailwind
• Propriedades CSS personalizadas para temas
• Botões, cartões e componentes de UI

---

Por Que Usar um Gerador de Tons?

Construir uma escala manualmente é lento e fácil de errar. Você precisa:

• Manter o matiz e a saturação idênticos
• Espaçar os passos de luminosidade uniformemente
• Exportar hex, RGB, HSL ou CSS para desenvolvimento

O Gerador de Tons de Cor Tooladex faz isso automaticamente: você escolhe uma cor base e quantos passos deseja (por exemplo, 9 ou 11), e ele produz uma escala completa com sua base no meio. Você pode copiar hex, RGB, HSL ou um bloco de variáveis CSS :root pronto para colar.

---

Exemplo: Construindo uma Paleta de Botões

Comece com um azul de marca como #3B82F6. O gerador fornece:

• Tons mais claros (50–400) — Fundos, estados de hover, botões desativados
• Sua cor base (500) — Ações primárias e estado padrão
• Tons mais escuros (600–900) — Estados pressionados, bordas, texto em fundos claros

Uma decisão de cor se torna uma paleta completa de componentes. Use a mesma abordagem para cores secundárias, de destaque ou semânticas (sucesso, aviso, erro).

---

Quantos Tons Você Deve Gerar?

A maioria dos sistemas de design usa 9–11 passos. O Tailwind usa 10 (50, 100, 200…900). Menos passos (5–7) funcionam para projetos mais simples; mais passos oferecem controle mais fino, mas podem ser excessivos.

A ferramenta Tooladex suporta 3, 5, 7, 9, 11 ou 15 tons. Para configurações semelhantes ao Tailwind, escolha 9 (rótulos 100–900) ou 11 (50–950).

---

Formatos de Saída

Você pode copiar tons em vários formatos:

• Hex — por exemplo, #EFF6FF, #DBEAFE — para ferramentas de design e estilos inline
• RGB — por exemplo, rgb(239, 246, 255) — para uso programático
• HSL — por exemplo, hsl(214, 100%, 97%) — para ajustes em código
• Variáveis CSS — Um bloco :root { --color-100: #...; --color-200: #...; } que você pode inserir em sua folha de estilo

Use a opção “Copiar como variáveis CSS” com um nome base (por exemplo, --color-primary) para obter uma escala completa pronta para temas.

---

Dicas para Melhores Resultados

• Trate sua base como o meio — Pense na cor base como o passo 500, não o mais escuro. O gerador a coloca no centro e constrói tons mais claros e mais escuros a partir daí.
• Verifique o contraste cedo — Use tons mais claros (50–200) para fundos com texto escuro; use tons mais escuros (700–900) para texto em fundos claros para atender às diretrizes de acessibilidade.
• Evite preto ou branco puro como base — Comece com uma cor que tenha alguma saturação (por exemplo, 10%+). Escalas de cinza puro podem parecer planas; um toque de matiz mantém a escala mais utilizável e natural.

Se uma escala parecer estranha (por exemplo, muito plana ou muito dura), tente ajustar ligeiramente a saturação da cor base. A luminosidade HSL funciona melhor com saturação moderada (cerca de 20–80%).

---

Experimente o Gerador de Tons de Cor

O Gerador de Tons de Cor Tooladex funciona inteiramente no seu navegador: escolha uma cor base, selecione o número de tons e copie hex, RGB, HSL ou variáveis CSS. Sem conta, sem dados enviados a um servidor — apenas uma paleta completa a partir de uma cor.