Paleta de cores — gerador de combinação de cores

Como usar o gerador de paleta de cores

1. Defina a cor base — escolha no seletor, digite um código HEX ou aperte Sortear para começar de um ponto aleatório.
2. Escolha a harmonia — análogas para calma, complementares para contraste forte, tríade ou tétrade para variedade, monocromática para um esquema de um único matiz, ou Automático para explorar.
3. Trave e sorteie — clique no cadeado dos quadrados que você quer manter e aperte a barra de espaço ou Sortear para recalcular só o resto.
4. Copie ou exporte — clique em um quadrado para copiar o HEX, use a faixa de claros e escuros para gerar variações, ou exporte a paleta inteira como variáveis CSS, JSON ou lista de HEX.

As harmonias de cores explicadas

O que dá para construir com isso

• Um site ou aplicativo — uma cor dominante, alguns acentos e neutros claros e escuros para superfícies e bordas.
• Um sistema de cores de marca — trave a cor da sua marca e descubra as secundárias que combinam com ela.
• Slides e infográficos — um conjunto coerente de cores bem distinguíveis para gráficos e seções.
• Design tokens — exporte como JSON ou variáveis CSS direto para o seu código ou design system.
• Ilustração e arte — teste harmonias rapidamente antes de fechar um esquema.

HEX, RGB e HSL: três jeitos de escrever a mesma cor

Toda cor que aparece aqui pode ser escrita de três formas, e vale entender a diferença porque cada uma serve para uma coisa. O HEX — algo como #4F46E5 — é só um número hexadecimal com três pares de dígitos: quanto de vermelho, quanto de verde e quanto de azul, cada um de 00 a FF (0 a 255). É compacto, é o que você cola no CSS e no Figma, e é o formato que este gerador copia por padrão. O RGB escreve os mesmos três números em decimal, rgb(79, 70, 229), e ganha uma quarta casa opcional para a transparência (rgba). HEX e RGB carregam exatamente a mesma informação: são duas grafias do mesmo ponto no espaço de cor da tela.

O HSL é diferente, e é nele que este gerador faz as contas. Em vez de misturar luzes, ele descreve a cor do jeito que uma pessoa pensa nela: matiz (a família da cor, medida como um ângulo de 0° a 360° em volta do círculo cromático), saturação (o quanto ela é intensa, de cinza a pura) e luminosidade (de preto a branco). Porque o matiz é um ângulo, as harmonias clássicas viram aritmética simples: a complementar é somar 180°, a tríade é somar 120° e 240°, a tétrade é dar uma volta em quatro saltos de 90°. O gerador gira só o matiz e mantém saturação e luminosidade praticamente iguais — é por isso que o resultado parece uma família de cores, e não cinco escolhas soltas.

Uma observação honesta: o HSL não é perceptualmente uniforme. Um amarelo e um azul com o mesmo número de luminosidade não parecem igualmente claros para o olho. Esse é o principal motivo pelo qual até uma paleta matematicamente perfeita ainda precisa de um ajuste humano no final. E, como este é um círculo aditivo de tela (RGB/HSL), o "oposto" do vermelho aqui é o ciano, e não o verde que você obteria num círculo de pigmento vermelho-amarelo-azul. Nenhum dos dois está errado; eles respondem a perguntas diferentes — misturar luz e misturar tinta.

Claros, escuros e acinzentados

A harmonia escolhe os seus matizes; as versões mais claras, mais escuras e mais acinzentadas dão as variações de cada cor — e você vai precisar muito mais delas do que de matizes novos. Na pintura a distinção é exata: clarear (tint) é misturar a cor com branco, escurecer (shade) é misturar com preto e acinzentar (tone) é misturar com cinza. Nos números de HSL com que este gerador trabalha, clarear e escurecer mantêm matiz e saturação fixos e mexem só na luminosidade, enquanto acinzentar mantém a luminosidade e puxa a saturação para baixo.

É para isso que serve a faixa de claros e escuros acima. Uma tela de verdade raramente é feita de cinco cores chapadas: ela é feita de um ou dois matizes que aparecem como uma escada inteira de luminosidades — um quase-branco no plano de fundo, uma borda um pouco mais escura, um tom médio para o texto corrido e um escuro profundo para títulos e botões pressionados. Os design systems formalizam exatamente isso: o Material Design e o Tailwind CSS entregam cada cor como uma escada numerada (50 a 900, do claro ao escuro) gerada a partir de um único matiz. Monte a sua paleta desse jeito e você terá cor suficiente para terminar um projeto, não só para começá-lo.

A regra 60-30-10

Um erro clássico de quem está começando é dar a mesma quantidade de espaço para todas as cores da paleta. Harmonia tem tanto a ver com proporção quanto com escolha, e a regra prática mais durável vem da decoração de interiores: a regra 60-30-10. Dê cerca de 60% do layout a uma cor dominante (quase sempre um neutro ou um tom claro tranquilo — planos de fundo e grandes áreas), cerca de 30% a uma secundária que sustenta e dá profundidade, e uns 10% a um acento forte, guardado para as coisas em que você realmente quer que a pessoa clique: botões, links, destaques. Os números exatos não são sagrados; a hierarquia é — uma cor manda, uma apoia e uma faísca aparece pouco.

Isso se aplica direto às cores que este gerador produz. Use o quadrado mais neutro ou mais calmo como plano de fundo (os 60%), um parceiro de harmonia intermediário como secundária (os 30%) e a cor mais saturada como acento (os 10%). A escada de claros e escuros preenche todo o resto: o hover do botão, a borda sutil, o cinza do texto desabilitado. Um fluxo prático que funciona: trave a cor âncora (a da marca, ou simplesmente aquela de que você gostou), sorteie até as cores de apoio ficarem boas e só então construa as escadas de luminosidade das duas ou três cores que você manteve. No fim, quase sempre você usa menos matizes e mais níveis de luminosidade do que imaginava.

Contraste e acessibilidade: harmonia não basta

Uma paleta pode ser perfeitamente harmônica e ainda assim ilegível. Harmonia descreve como os matizes se relacionam entre si; acessibilidade descreve se uma pessoa consegue distinguir duas cores vizinhas — e as duas coisas são independentes. O padrão de referência é a razão de contraste das WCAG (Diretrizes de Acessibilidade para Conteúdo Web): no nível AA, o texto de tamanho normal precisa de pelo menos 4,5:1 de contraste em relação ao plano de fundo, e o texto grande (a partir de 18 pt, ou 14 pt em negrito) precisa de pelo menos 3:1. Duas cores complementares lindas, ambas de luminosidade média, costumam reprovar nesse teste quando viram texto sobre fundo; e um esquema monocromático tranquilo também reprova com frequência, porque as luminosidades ficam próximas demais.

Então teste em vez de adivinhar. Defina primeiro os papéis das cores — qual quadrado é fundo, qual carrega texto, qual é o acento clicável — e depois verifique cada par de texto e fundo contra o limiar de 4,5:1 (ou 3:1) no nosso verificador de contraste WCAG. Mais dois hábitos importam: nunca use só a cor para transmitir um significado — quem tem daltonismo pode não ver diferença entre o seu "verde de sucesso" e o seu "vermelho de erro", então acrescente um ícone, um rótulo ou um padrão. E lembre que essa razão é uma fórmula para luz de tela, não um modelo perfeito da percepção humana; abordagens mais novas, como a APCA, tentam prever a legibilidade real com mais precisão, mas as WCAG continuam sendo a base atual de acessibilidade.

Erros comuns em paletas

A maioria das paletas que fracassa na prática fracassa pelos mesmos poucos motivos. Fique de olho nestes:

• Matizes demais competindo. Cinco cores totalmente saturadas e sem relação viram ruído. As paletas fortes se apoiam em um ou dois matizes mais neutros e tiram a variedade dos níveis de luminosidade, não de matizes extras.
• Nenhum neutro, nenhuma âncora. Sem uma cor de fundo dominante e um neutro tranquilo para o olho descansar, até uma harmonia de manual fica agitada.
• Peso igual para tudo. Usar todas as cores na mesma proporção elimina a hierarquia e nada guia o olhar. Use a divisão 60-30-10.
• Ignorar contraste. Escolher cores que ficam ótimas lado a lado e só depois descobrir que o texto em cima delas é ilegível. Teste os pares de texto antes de fechar.
• Confiar mais nos números do que no olho. Como o HSL não é perceptualmente uniforme, passos iguais de número não parecem iguais. Olhe a paleta pronta numa tela de verdade, no claro e no escuro, e ajuste à mão.
• Saturação máxima em tudo. Paletas berrantes do começo ao fim cansam a vista. Reduza a saturação nas cores de apoio e guarde a intensidade total para o acento.

Perguntas frequentes

O que é um gerador de paleta de cores?

É uma ferramenta que monta um conjunto de cores que combinam entre si. Você parte de uma cor base (escolhendo no seletor, digitando um HEX ou sorteando) e escolhe uma regra de harmonia da teoria das cores, como complementares ou análogas. O gerador então calcula quatro ou cinco cores cujo matiz e luminosidade têm relação matemática com a base, de modo que o resultado é uma combinação de cores coordenada para um site, uma marca, uma apresentação ou uma ilustração — e não um amontoado aleatório.

Como eu travo uma cor e sorteio o resto?

Clique no cadeado de qualquer quadrado para fixá-lo. Depois aperte o botão Sortear (ou a barra de espaço) e todos os quadrados destravados são recalculados em volta de um novo matiz base, enquanto os travados ficam exatamente como estão. É o caminho mais rápido para achar uma paleta: trave a cor ou as duas cores de que você gostou, sorteie até as outras encaixarem e exporte. Destrave a qualquer momento para devolver um quadrado ao sorteio.

Qual é a diferença entre clarear, escurecer e acinzentar uma cor?

Clarear mistura a cor com branco, escurecer mistura com preto e acinzentar mistura com cinza (deixando-a menos saturada). A faixa abaixo da paleta mostra as versões mais claras e mais escuras da cor selecionada em passos fixos de luminosidade, que é justamente o que você precisa para estados de hover, bordas, planos de fundo e texto dentro do mesmo matiz. Todos os valores são calculados a partir da cor que você escolheu, então sempre combinam com a paleta.

Como uso essas cores no meu CSS ou na minha ferramenta de design?

Cada quadrado mostra o código HEX e copia com um clique. Para levar a paleta inteira de uma vez, use os botões de exportação: "Variáveis CSS" entrega um bloco :root pronto para colar (--color-1 até --color-5), "Array JSON" entrega ["#…","#…"] para código ou design tokens, e "Lista de HEX" entrega uma lista simples, uma cor por linha, para jogar no Figma, no Sketch ou num guia de estilo. HEX funciona em qualquer lugar; se você precisar de RGB ou HSL, passe pelo conversor de cores.