Gerar paleta de cores a partir de uma cor base

O que é uma paleta gerada por harmonia

Escolher cores que combinam entre si "de olho" é possível, mas teoria de cor oferece um atalho: um conjunto de regras geométricas sobre o círculo cromático que produzem combinações consistentes de forma previsível, a partir de uma única cor de base. Esta ferramenta aplica cinco dessas regras — complementar, análoga, tríade, tétrade e monocromática — à cor escolhida, gerando uma paleta pronta para usar como ponto de partida.

As cinco regras, uma por uma

Complementar pega a cor diretamente oposta no círculo de matiz, a 180 graus de distância — o contraste mais forte possível entre duas cores de mesma saturação e luminosidade. Análoga pega duas cores vizinhas, a 30 graus de distância para cada lado, produzindo uma combinação mais suave e harmoniosa, com pouca variação de matiz. Tríade distribui três cores em ângulos de 120 graus, mantendo contraste forte com mais opções que a complementar. Tétrade faz o mesmo com quatro cores, a 90 graus de distância cada uma. Monocromática não toca no matiz nem na saturação — mantém os dois fixos e varia só a luminosidade, gerando cinco tons da mesma cor, do mais escuro ao mais claro.

Quando cada regra costuma servir melhor

Não existe uma regra "melhor" de forma absoluta — cada uma serve um efeito diferente. Complementar e tríade tendem a funcionar bem quando o objetivo é destacar elementos com contraste alto, como um botão de ação sobre um fundo. Análoga costuma funcionar melhor para composições mais calmas e coesas, onde nada deve saltar aos olhos de forma abrupta. Monocromática é útil quando a identidade visual já gira em torno de uma cor específica e o que falta é uma escala de tons dela — para fundo, texto e destaque, por exemplo, sem sair da mesma família de cor.

O que entra em cada formato de exportação

O CSS exportado é um bloco :root com uma variável por cor da paleta (--cor-1, --cor-2 e assim por diante), pronto para colar num arquivo de estilos existente. O JSON traz a mesma paleta como uma lista de objetos, cada um com o valor hexadecimal e os três componentes RGB separados — útil para consumir a paleta a partir de código, sem precisar reprocessar o hex. A imagem é uma faixa de retângulos coloridos, um por cor da paleta, pensada para compartilhar ou visualizar fora de qualquer editor de código.

Harmonia de cor é um ponto de partida, não uma garantia

Uma paleta gerada por regra geométrica é consistente matematicamente, mas isso não substitui o julgamento de quem está de fato aplicando as cores num projeto. Contraste de acessibilidade entre texto e fundo, por exemplo, não é garantido só porque duas cores vêm da mesma paleta harmônica — vale conferir isso separadamente, com a ferramenta de contraste desta mesma família, antes de decidir onde cada cor da paleta vai ser usada.

A cor base determina tudo o que vem depois

Como cada esquema é calculado por rotação de matiz e ajuste de luminosidade a partir da cor escolhida, a paleta inteira depende só dessa cor de partida — não há um banco de paletas prontas por trás, cada resultado é gerado no momento a partir do que foi escolhido na roda de cor ou digitado no campo hex. Isso significa que pequenas mudanças na cor base (por exemplo, girar o matiz alguns graus) produzem uma paleta visivelmente diferente, mesmo mantendo o mesmo esquema de harmonia selecionado — vale experimentar mais de uma cor base antes de se fixar num resultado.

Combinando esquemas manualmente

Nada impede gerar mais de uma paleta e combinar cores de esquemas diferentes manualmente — por exemplo, usar as duas cores de uma paleta complementar como cor principal e de destaque, e complementar com os tons de uma paleta monocromática gerada a partir da mesma cor base, para dar variação de fundo e texto sem fugir da identidade de cor escolhida. A ferramenta gera uma paleta de cada vez, mas o resultado de cada uma pode ser copiado e reunido à mão conforme a necessidade do projeto.

O que esta ferramenta não faz

Ela não avalia se a paleta gerada é esteticamente adequada a um projeto específico, não verifica contraste de acessibilidade entre as cores geradas e não sugere onde aplicar cada cor dentro de uma interface. O papel dela é aplicar a regra geométrica escolhida à cor de base e devolver o resultado pronto para exportar — a decisão de uso continua sendo de quem está desenhando.