Gerador de tonalidades de cores

Tons claros e sombras

Os tons claros são obtidos misturando uma cor com branco, tornando-a progressivamente mais clara. As sombras são obtidas misturando com preto, tornando-a mais escura. Juntos, formam uma escala tonal completa, útil para design de interface, gradientes, estados de hover e sistemas de cores acessíveis.

Perguntas frequentes

Como usar esses tons ?

Use os tons claros para planos de fundo, estados de hover e bordas. Use as sombras escuras para texto, estados ativos e realce. Clique em « Copiar tudo como variáveis CSS » para obter um trecho CSS pronto para uso.

Posso copiar as cores individualmente ?

Sim ! Clique em uma amostra para copiar seu valor HEX para a área de transferência.

Tom claro, sombra e tom, as definições formais

Três termos são usados de forma vaga; a teoria clássica das cores os distingue com precisão:

• Tom claro = cor de base + branco. Mais clara e mais pálida. O rosa é um tom claro do vermelho; o azul-celeste é um tom claro do azul.
• Sombra = cor de base + preto. Mais escura e mais profunda. O grená é uma sombra do vermelho; o azul-marinho é uma sombra do azul.
• Tom = cor de base + cinza. Menos saturada, mais suave. Adiciona nuance sem alterar muito o brilho.

Este gerador produz tons claros (mais claros que a base) e sombras (mais escuras). Os tons (que adicionam cinza em vez de branco ou preto) são úteis para paletas suaves e sofisticadas (pense nos sistemas de cores do design de interiores dos anos 1970), mas raramente necessários para o trabalho típico de interface.

Por que os sistemas de design modernos usam escalas numéricas

O Tailwind CSS popularizou a escala numérica 50-100-200-…-900-950 por cor, com a parada «500» convencionalmente tratada como a base. O Material Design usa um sistema paralelo 50-100-…-900; o Bootstrap 5 usa 100-…-900; o IBM Carbon usa 10 paradas por amostra. A ideia compartilhada: uma única cor da marca raramente é suficiente, as interfaces precisam de variantes consistentes para estados de hover, planos de fundo, bordas, anéis de foco, estados desabilitados, emblemas e equivalentes de modo escuro. Uma escala numérica previsível fornece essas variantes de uma forma que é portável entre componentes, refatorável quando a marca evolui e descobrível por qualquer um que leia a base de código.

Como diferentes algoritmos calculam a escala

Há três formas comuns de calcular uma escala de tons claros/sombras, com resultados visuais diferentes:

• Mistura RGB com branco / preto. A definição da teoria das artes. Produz tons claros e sombras fiéis, mas não leva em conta a uniformidade perceptual, os amarelos dessaturam rapidamente, os azuis permanecem ricos.
• Ajuste de luminosidade HSL. Rápido e fácil: empurre o canal L para cima para os tons claros, para baixo para as sombras. A abordagem mais comum nas ferramentas mais antigas. A desvantagem é que a luminosidade do HSL não é perceptualmente uniforme, o amarelo a 50% de L parece muito mais brilhante que o azul a 50% de L, então uma paleta construída por passos de HSL parece desigual entre as cores.
• Escalonamento de luminosidade OKLCH ou CIELAB. A abordagem moderna e perceptualmente uniforme. O L no OKLCH é calibrado de modo que «200 → 300 → 400» pareça o mesmo passo independentemente da cor. O Tailwind v4 (lançado em janeiro de 2025) reconstruiu todas as suas paletas padrão em torno do OKLCH exatamente por essa razão.

Se a sua escala alguma vez parecer «plana» (passos de amarelo que se desbotam, passos de azul que todos se leem como o mesmo azul-escuro), quase sempre é porque a matemática subjacente é baseada em HSL e não em OKLCH. O CSS moderno (CSS Color Module Level 4) expõe oklch(), lab() e color-mix(in oklch, …) diretamente, tornando as escalas perceptualmente uniformes uma única linha sem nenhuma ferramenta externa.

Casos de uso

• Iniciar um sistema de design a partir de uma única cor da marca. Escolha o HEX da marca, gere a escala, copie as variáveis CSS, publique.
• Personalizar um mapa colors do Tailwind. Substitua a cor da marca padrão pela sua própria escala de 11 paradas.
• Estados de hover e foco da interface. Um padrão comum: o fundo do botão usa a 500, o hover usa a 600, o estado ativo usa a 700, o anel de foco usa a 400 com baixa opacidade.
• Planos de fundo e elevação. Os fundos de cartão usam a 50; as bordas sutis usam a 200; o texto desabilitado usa a 400.
• Equivalentes de modo escuro. Muitos sistemas geram uma escala paralela de modo escuro em vez de inverter matematicamente a clara, as cores que parecem equilibradas no branco nem sempre parecem equilibradas no quase-preto.
• Variações de mockup. Compare rapidamente três candidatas de marca gerando a escala para cada uma e colocando-as no mesmo mockup de interface.
• Catálogos de amostras impressas. Faça uma verificação prévia de uma paleta de impressão para ver quão sutis os passos realmente parecem quando adjacentes.

Acessibilidade e contraste

Uma escala gerada é tão útil quanto os pares de texto sobre plano de fundo que ela produz. Os mínimos da WCAG 2.1 a ter em mente:

• Texto de corpo normal: 4,5:1 contra o seu plano de fundo (Nível AA).
• Texto grande ou em negrito (18 pt / 14 pt em negrito ou maior): 3:1 (Nível AA).
• Componentes de interface e objetos gráficos: 3:1 (Nível AA, SC 1.4.11).

Regras confiáveis na maioria das escalas bem construídas: o par 50 + 900 sempre passa para texto de corpo, o par 100 + 800 quase sempre passa. O par 400 + 500 quase nunca passa. Teste os pares específicos que você pretende usar, a ferramenta Verificador de contraste de cores calcula as razões WCAG para quaisquer dois valores HEX.

Conectando a saída à sua base de código

Três formas comuns de consumir uma escala gerada:

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }

// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>

// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

Erros comuns

1. Gerar paradas demais. As 11 do Tailwind são o ponto ideal. 20 paradas é exagero, a maioria é visualmente indistinguível, e você nunca as usará.
2. Usar escalas baseadas em HSL para cores amarelas / laranjas / fluorescentes. Elas se desbotam nas paradas claras e não escurecem de forma limpa. Recorra à geração baseada em OKLCH se a cor da sua marca cair na faixa de cores «complicadas».
3. Tratar a escala como final sem verificar o contraste do texto. Belas relações de cor às vezes combinam texto branco com a parada 400 e falham no WCAG 4,5:1. Teste cada combinação que você realmente usará.
4. Inverter a paleta clara para criar uma paleta de modo escuro. Matematicamente tentador, visualmente errado, as cores que parecem equilibradas no branco parecem berrantes no quase-preto. Gere ou ajuste à mão uma escala paralela de modo escuro.
5. Usar a cor de base como «500» quando ela perceptualmente corresponde melhor a outra parada. Se a cor da sua marca for genuinamente escura, ela pode ser a 700 da sua escala; deixe a relação perceptual ditar qual posição ela ocupa, não a convenção.
6. Esquecer a parada 50. O tom mais claro é o mais útil para planos de fundo e realces sutis. Não trunque a sua escala na 100.

Mais perguntas frequentes

Por que a minha escala parece plana, todas as paradas parecem semelhantes?

Duas causas comuns: (1) etapas demais em uma faixa estreita demais, tente menos etapas, especialmente se a cor já for de luminância média; (2) escalonamento baseado em HSL em uma cor onde o HSL é mal calibrado (amarelos, laranjas, cores neon). Recorrer a um gerador de paletas baseado em OKLCH geralmente corrige ambos.

Como eu gero uma paleta de modo escuro a partir de uma escala de modo claro?

Não inverta simplesmente. A inversão ingênua (trocar as paradas claras e escuras) produz paletas de modo escuro que parecem berrantes ou se desbotam. A convenção no Material 3, no Radix Colors e nas variantes escuras do Tailwind é gerar uma escala paralela ajustada para o plano de fundo escuro, geralmente com saturação levemente reduzida e cor deslocada para compensar como as cores são percebidas sobre superfícies escuras. A maioria dos grandes sistemas de design publica ambas as paletas lado a lado.

Posso usar as cores geradas comercialmente?

Sim. Os valores de cor não são protegidos por direitos autorais; os códigos HEX são fatos sobre pixels. Use a paleta gerada em qualquer lugar, projetos de código aberto, sites comerciais, sistemas de marca, impressão, embalagens.

Qual é um bom número de etapas?

Para o design de interface, de 9 a 11 paradas por cor é a convenção estabelecida (Tailwind, Bootstrap e Carbon ficam todos nessa faixa). O Material Design usa 13. Abaixo de 7 paradas a escala parece com resolução insuficiente; acima de 13 as paradas tornam-se difíceis de distinguir umas das outras.

Algo é enviado a um servidor?

Não. A matemática de cores roda no seu navegador; o HEX de entrada, as paradas geradas e o CSS copiado nunca tocam um servidor. Útil quando a cor da marca ainda não foi lançada ou está sob embargo.

Em que isto difere de um gerador de paletas de cores?

Um gerador de paletas escolhe várias cores distintas que funcionam juntas (complementares, análogas, triádicas etc.), cores totalmente diferentes. Um gerador de sombras (este) mantém uma única cor e produz variantes mais claras e mais escuras dela. Trabalhos diferentes: os geradores de paletas dão a você a cor primária da marca mais os destaques; os geradores de sombras dão a você as variações de uma dessas cores.

Ferramentas relacionadas