Gerador de Paleta de Cores
Gere paletas complementares, análogas, triádicas e monocromáticas a partir de uma cor base — clique em qualquer amostra para copiar o hex.
1.204 visualizações
Como Funciona
A teoria das cores define regras de harmonia como relações angulares fixas entre matizes em um círculo cromático. Esta ferramenta as calcula no modelo HSL (Hue, Saturation, Lightness — Matiz, Saturação, Luminosidade) em vez de RGB, porque o Matiz é um valor natural de 0 a 360° em um círculo — somar um ângulo para encontrar uma cor relacionada é aritmética direta. Em RGB, as cores são apenas três canais de intensidade sem noção inerente de "ângulo", então o mesmo cálculo de harmonia exigiria converter para HSL internamente de qualquer forma; esta ferramenta simplesmente trabalha no espaço onde essa matemática é nativa.
A partir do Matiz da sua cor base, ela deriva: a complementar (o único matiz diretamente oposto, base + 180°, para contraste máximo), a triádica (três matizes distribuídos uniformemente ao redor do círculo em intervalos de 120°, vívidos mas equilibrados), a análoga (matizes vizinhos a ±30°, que parecem calmos e coesos por estarem próximos entre si), a complementar dividida (os dois matizes que flanqueiam o complemento, a ±150°, oferecendo contraste com menos tensão do que um par complementar puro), e uma escala monocromática que mantém Matiz e Saturação fixos enquanto varia a Luminosidade para cima e para baixo. Por exemplo, um matiz base de 200° (um azul) produz um matiz complementar de 20° (um laranja) e matizes triádicos em 320° e 80°.
O Que Você Deve Saber
- Uma receita prática de 60-30-10: use a cor base para cerca de 60% do design, um tom análogo para 30%, e a complementar como um destaque de 10% — botões, links, realces.
- Harmonia não é acessibilidade. Dois matizes serem matematicamente relacionados no círculo não diz nada sobre seu contraste de luminosidade; verifique combinações de texto sobre cor separadamente contra o WCAG.
- Clique em qualquer amostra para copiar seu código hex diretamente para a área de transferência.
- Saturação e Luminosidade ainda importam enormemente. Duas paletas podem compartilhar exatamente o mesmo conjunto de matizes e ainda assim parecer completamente diferentes em clima — uma versão de baixa saturação e alta luminosidade parece suave e pastel, enquanto os mesmos matizes em saturação total e baixa luminosidade parecem ousados e dramáticos.
- Associações culturais não seguem o círculo. O parceiro de harmonia matematicamente "correto" de um matiz não diz nada sobre o que aquela cor sinaliza em determinada região ou setor — o vermelho pode significar alarme em um contexto e celebração em outro, independentemente de qualquer regra de harmonia.
Um exemplo rápido: escolha #3B82F6 (um azul médio, aproximadamente matiz 217°) como base. O complemento fica perto do matiz 37°, um laranja quente — um par natural para um botão principal em uma interface dominada pelo azul. O conjunto triádico adiciona matizes perto de 97° (um verde-amarelado) e 337° (um rosa-magenta), úteis quando um design precisa de três cores de destaque distintas mas equilibradas, como tags de categoria ou as séries de dados de um gráfico.
Perguntas Frequentes
Qual harmonia devo escolher?
Paletas análogas transmitem calma e coesão, já que os matizes ficam próximos no círculo; a complementar oferece o contraste máximo para chamadas para ação; a triádica é vibrante mas equilibrada. A monocromática é a escolha mais segura para interfaces — um único matiz, vários níveis de luminosidade, garantindo uma sensação unificada mesmo que você não se sinta confiante misturando vários matizes por conta própria.
Por que o matiz é calculado em HSL em vez de diretamente em RGB?
O HSL representa o Matiz como um único ângulo (0–360°) em um círculo, então "girar 180° para o complemento" é uma soma de um único passo. O RGB não tem noção nativa de ângulo — seus três canais (vermelho, verde, azul) não se mapeiam de forma limpa em um círculo, então calcular harmonia diretamente em RGB exigiria uma matemática muito mais complexa para o mesmo resultado, convertendo de um lado para outro internamente de qualquer forma.
Qual é a diferença entre complementar e complementar dividida?
A complementar usa o único matiz exatamente a 180° de distância — contraste máximo, mas pode parecer visualmente tenso em quantidades iguais. A complementar dividida usa os dois matizes de cada lado desse ponto (±150° a partir da base), mantendo forte contraste mas parecendo um pouco mais suave e mais fácil de equilibrar, motivo pelo qual muitas paletas de logotipo e de marca se apoiam nela em vez de um par complementar puro.
Como copio uma cor?
Clique na amostra — seu código hex é copiado instantaneamente para a área de transferência e uma confirmação aparece, pronta para colar diretamente em CSS, uma ferramenta de design ou código.
As paletas geradas são acessíveis para texto?
Não automaticamente. Harmonia descreve relações de matiz, não contraste de luminosidade — duas cores harmoniosas ainda podem falhar em legibilidade quando uma é texto e a outra é fundo, especialmente dois matizes de tom médio com luminosidade semelhante. Para texto sobre uma cor, verifique uma razão de contraste WCAG de pelo menos 4,5:1 (3:1 para texto grande) com um verificador de contraste dedicado antes de publicar.
Ferramentas Semelhantes
Reportar um Problema
Gerador de Paleta de Cores
Comentários
Ainda não há comentários — seja o primeiro a escrever um!