Gerador de paletas de cores a partir de uma cor base

O que os nomes das harmonias realmente significam

Cada opção aqui é uma regra aplicada a um círculo. O matiz vai de 0–360 graus, sua cor base fica em algum ponto dele, e a harmonia decide onde as outras amostras caem.

• Complementar — o matiz a 180 graus de distância. Separação máxima, que é a razão de funcionar para um botão de chamada para ação sobre um fundo da marca, e também a razão de uma página inteira construída com ela parecer berrante.
• Análoga — vizinhos dentro de 60 graus. Calma e coerente, com um problema de origem: nada se destaca. Se você precisa de um acento, roube-o de outra regra.
• Complementar dividida — em vez do oposto exato, os dois matizes de cada lado dele. Você mantém quase todo o contraste e perde a vibração que os complementares puros têm em saturação total.
• Triádica e quadrada — três ou quatro matizes espaçados por igual ao redor do círculo. As duas dão muita cor, e as duas precisam que um dos matizes domine ou o resultado parece um brinquedo.
• Monocromática — um matiz, cinco luminosidades. A escolha mais segura, e a que mais vezes precisa de uma cor de acento emprestada para não parecer chapada.

Uma coisa que surpreende as pessoas: este é o círculo RGB, não o círculo cromático que te ensinaram na aula de artes. No círculo RGB o oposto do azul é o amarelo. No círculo vermelho-amarelo-azul que os pintores usam, o oposto do azul é o laranja. Nenhum está errado, são modelos diferentes, mas se um resultado complementar parecer estranho, geralmente é por isso.

Cinco hexadecimais ainda não são uma paleta

Uma paleta de interface que funcione precisa de três coisas que esta ferramenta não produz.

Proporção. A orientação clássica é mais ou menos 60% da superfície em uma cor dominante, 30% em uma secundária, 10% no acento. Cinco amostras exibidas do mesmo tamanho escondem isso por completo, então uma paleta que parece equilibrada aqui pode ser esmagadora quando estiver em uma página de verdade.

Neutros. Quase todo pixel de um produto real é cinza, branco ou quase preto: texto, bordas, fundos, estados desabilitados. Nenhuma regra de harmonia gera isso. Construa-os separadamente, e misture neles um pouco do seu matiz base — cinzas com alguns pontos de saturação emprestados do matiz da marca parecem intencionais, enquanto um #808080 puro parece um espaço reservado.

Estados. Hover, ativo, foco, desabilitado e selecionado precisam cada um dos seus próprios valores, geralmente obtidos subindo ou descendo a luminosidade em 6–10 pontos a partir da base. Planeje quatro ou cinco passos por cor importante, não um.

Onde este gerador deixa a desejar

Ele trabalha em HSL, o que significa que os números de luminosidade são matemáticos, não perceptuais. O amarelo com 50% de luminosidade parece muito mais brilhante que o azul com 50% de luminosidade, porque seu olho é muito mais sensível ao verde do que ao azul. Em uma paleta triádica ou quadrada, a amostra amarelada quase sempre vai parecer que está brilhando ao lado das outras. Ajuste-a à mão; todo designer faz isso.

Uma base quase cinza o inutiliza por completo. Se sua base tem saturação muito baixa, girar o matiz quase não muda nada, e você vai receber cinco amostras que parecem idênticas. A ferramenta ainda vai mostrá-las, e os códigos hexadecimais são mesmo diferentes. Só que não são diferentes o bastante para usar. Comece de uma cor saturada e dessature depois.

A harmonia também não diz nada sobre legibilidade nem sobre daltonismo. Duas amostras podem estar a 120 graus de distância e ainda assim ser indistinguíveis para alguém com deuteranomalia, a forma mais comum de deficiência de visão de cores vermelho-verde. E uma cor que combina lindamente com a sua base pode ser ilegível como texto sobre ela. Verifique cada par de texto e fundo separadamente antes de publicar.

Como nomear as variáveis que você exporta

A exportação usa nomes posicionais, de --palette-1 até --palette-5, porque a ferramenta não faz ideia para que servem as cores. Renomeie-as por função antes de fazer commit: --surface, --accent, --accent-hover, --danger.

Resista a nomeá-las pelo matiz. Uma variável chamada --blue-500 é uma pequena bomba-relógio: no dia em que a marca mudar para verde, ou o nome mente ou você mexe em todos os arquivos que a usam. Nomes por função sobrevivem a uma troca de marca; nomes por matiz, não.

Perguntas frequentes

Quantas cores uma paleta deve ter?

Para uma interface, uma cor dominante, um acento e uma família de quatro a seis neutros cobrem quase tudo. Cinco matizes já são mais do que a maioria dos produtos usa bem. Cores extras são mais fáceis de acrescentar depois do que de remover.

Qual harmonia escolher se eu não souber?

Análoga para algo calmo, complementar se você precisa que um elemento chame atenção. Com as duas é difícil errar. Triádica e quadrada são as que exigem mão firme, porque três ou quatro matizes fortes vão brigar a menos que um deles lidere com clareza.

Por que as cinco amostras parecem quase iguais?

Sua cor base está perto do cinza. Girar o matiz só tem efeito quando há saturação para girar, então uma base dessaturada produz cinco cores quase idênticas. Comece de uma versão vibrante da cor e reduza a saturação depois.

Posso extrair uma paleta de uma imagem aqui?

Nesta ferramenta não. Ela funciona a partir de uma única cor base que você fornece. Se você tem uma imagem, tire dela a cor dominante com qualquer seletor de cores, cole esse hexadecimal e use como base.

Estas cores são acessíveis?

Não automaticamente. Uma regra de harmonia organiza matizes e não sabe nada sobre contraste. Teste cada par de texto e fundo contra os limiares da WCAG antes de usar, e nunca dependa só do matiz para transmitir significado.

Última atualização 19 de setembro de 2026