O que é uma Paleta de Cores Harmoniosa?
Uma paleta de cores harmoniosa é um conjunto de cores que funcionam bem juntas, seguindo princípios da teoria das cores. Cada tipo de harmonia cria uma relação diferente entre as cores no círculo cromático (color wheel), resultando em diferentes sensações visuais.
Onde e por que usar?
Use este gerador para criar identidades visuais, definir paletas de UI/UX, escolher combinações para campanhas de marketing ou explorar opções de branding. Análoga: cores adjacentes, sensação de harmonia e fluxo (ideal para fundos e interfaces suaves). Complementar: cores opostas no círculo, alto contraste (ideal para CTAs e destaques). Tríade: três cores igualmente espaçadas, vibrante e equilibrado. Monocromática: variações de luminosidade de uma única cor, elegante e coeso.
Como funciona?
Escolha uma cor base com o seletor ou digitando o código HEX, selecione o tipo de harmonia e a paleta de 5 cores é gerada instantaneamente. Clique em qualquer swatch para copiar o código HEX para a área de transferência.
Quando usar e quando não usar
Use como ponto de partida quando a campanha sazonal precisa de cores próprias sem se afastar da marca, para explorar em poucos cliques como a cor institucional conversa com uma complementar ou uma tríade, e para montar a escala de claro a escuro de uma cor, útil em fundos, bordas e estados de botão.
Não trate a saída como paleta pronta. A ferramenta combina matiz e luminosidade, não verifica se texto e fundo terão contraste suficiente; cada par que vai carregar texto precisa passar pelo Verificador de Contraste. Também não serve para especificar cor de impressão: HEX descreve cor de tela, e material gráfico pede conversão para CMYK ou Pantone com prova de cor.
Exemplo: laranja de campanha #E85D04
Resultado das quatro harmonias para a mesma cor base:
- Análoga:
#E8048F#E8041D#E85D04#E8CF04#8FE804 - Complementar:
#843502#E85D04#FC9756#048FE8#025184 - Tríade:
#FC873D#E85D04#9D3F03#04E85D#5D04E8 - Monocromática:
#642802#C95003#FC8336#FDC19B#FEE0CD
Medindo cada cor contra fundo branco, os números explicam por que a paleta precisa de revisão: o próprio laranja base fica em 3,50:1 e só serve para texto grande; na análoga, o amarelo #E8CF04 cai para 1,57:1 enquanto o rosa #E8048F chega a 4,33:1, apesar de terem a mesma luminosidade no modelo HSL. Na monocromática, #C95003 passa em AA para texto normal por margem mínima (4,53:1) e #642802 passa com folga (11,37:1). A cor do HEX escrita sobre cada amostra é escolhida só para ficar legível ali, clara ou escura, e não é uma avaliação de acessibilidade.
Como as cores são derivadas
A cor base em HEX é convertida para HSL: matiz de 0 a 360 graus, saturação e luminosidade de 0 a 100. As harmonias giram o matiz ou mexem na luminosidade, mantendo a saturação, e o resultado volta para HEX.
- Análoga: matiz −60°, −30°, a base, +30° e +60°.
- Complementar: a base 20 pontos mais escura, a base, a base 20 pontos mais clara, a oposta (+180°) e a oposta mais escura.
- Tríade: a base 15 pontos mais clara, a base, a base 15 pontos mais escura e os matizes a +120° e +240°.
- Monocromática: o matiz e a saturação da base com luminosidade fixa em 20, 40, 60, 80 e 90.
O círculo usado é o das telas, baseado em vermelho, verde e azul. Ele difere do círculo tradicional de artes, baseado em vermelho, amarelo e azul: aqui a complementar do vermelho é o ciano, e não o verde que se aprende na escola.
Limitações
- São sempre cinco cores, apenas em HEX. Não há saída em RGB, HSL ou CMYK, nome de cor nem exportação para CSS ou arquivo de paleta.
- A entrada aceita somente HEX de seis dígitos.
- Luminosidade igual no HSL não significa aparência igual: amarelo e azul com o mesmo valor parecem muito diferentes, como mostram as razões de contraste do exemplo.
- Na monocromática, a cor base pode não aparecer, porque as cinco luminosidades são fixas.
- Não há bloqueio de cor, geração aleatória nem histórico.
Privacidade
Tudo roda no navegador e nada é enviado ao servidor. A cópia da cor usa a área de transferência do sistema, só quando você clica na amostra.
Para continuar
Como Criar Paletas de Cores Harmônicas e Acessíveis traz a regra 60-30-10 e o fluxo de validação, e Paleta de Cores por Segmento mostra como redes controlam identidade visual em escala. Teste cada par de texto no Verificador de Contraste WCAG e leve as cores aprovadas para o Gerador de CSS Gradient quando o hotsite pedir degradê.
Perguntas frequentes
Qual harmonia usar em uma campanha de varejo?
A complementar é a mais usada para destacar preço e botão de compra, porque cria contraste de matiz com a cor da marca. A análoga funciona para fundos e peças que precisam parecer da mesma família. A monocromática é a mais segura para interface, em fundos, bordas e estados de botão.
Por que a complementar do vermelho deu ciano e não verde?
Porque a ferramenta usa o círculo cromático das telas, baseado em luz vermelha, verde e azul. Nele, o oposto do vermelho é o ciano. O verde como complementar do vermelho vem do círculo tradicional de pigmentos, usado em pintura, que tem outra organização.
As cores geradas são acessíveis?
Não necessariamente. A paleta é calculada por matiz e luminosidade, sem verificar contraste. Cada combinação de texto e fundo precisa ser testada, e só as que atingirem 4,5:1 devem carregar texto normal no nível AA.
Posso usar esses códigos HEX em material impresso?
Como referência, sim, mas não como especificação final. HEX descreve cor de tela, e a mesma cor impressa muda conforme papel, tinta e processo. Converta para CMYK ou Pantone com o fornecedor gráfico e peça prova de cor.
Por que a cor base não aparece na paleta monocromática?
A monocromática usa o matiz e a saturação da cor base com cinco níveis fixos de luminosidade: 20, 40, 60, 80 e 90. Se a luminosidade da base não coincidir com nenhum desses níveis, ela não aparece exatamente, e sim as variações mais claras e mais escuras dela.