Círculo cromático interativo e grátis
O círculo cromático é a ferramenta base de qualquer designer: organiza as cores por matiz e mostra, de forma imediata, quais combinam entre si. Escolha a cor base na roda (ou cole o código HEX) e veja na hora as harmonias complementar, análoga, tríade, tétrade, split-complementar e monocromática — cada cor com o seu HEX, RGB e HSL, prontos a copiar com um clique.
Como funcionam as harmonias de cor
A complementar usa a cor oposta (180°) e dá o contraste máximo — ideal para destacar um botão ou um apelo à ação. A análoga usa cores vizinhas e resulta em composições calmas e coerentes. A tríade (três cores a 120°) e a tétrade (quatro a 90°) dão paletas vibrantes e equilibradas. A split-complementar suaviza o contraste da complementar. A monocromática mantém o matiz e varia a luminosidade — a escolha mais segura para interfaces.
Como usar
Clique ou arraste na roda cromática para escolher a cor base — ou escreva o HEX.
Escolha a harmonia e ajuste a luminosidade até gostar do resultado.
Clique em qualquer código para o copiar, ou descarregue a paleta em PNG.
Veja também o gerador de paletas de cores e a tabela de cores com códigos HEX, RGB e CMYK.
Perguntas frequentes
O que é o círculo cromático?
É a representação circular das cores por ordem de matiz (vermelho, laranja, amarelo, verde, azul, violeta). A posição de cada cor no círculo define as relações entre elas: cores opostas contrastam, cores vizinhas harmonizam.
Qual é a cor complementar de uma cor?
É a cor que fica exatamente no lado oposto do círculo cromático, a 180 graus. Escolha a cor base na roda e a harmonia "Complementar" mostra-lhe o par com o contraste mais forte possível.
Que harmonias de cor existem?
As mais usadas são a complementar (180 graus), a análoga (cores vizinhas), a tríade (três cores a 120 graus), a tétrade (quatro cores a 90 graus), a split-complementar (a complementar dividida em duas) e a monocromática (variações de luminosidade do mesmo matiz).
Posso exportar a paleta gerada?
Sim. Pode descarregar a paleta em PNG ou copiar todos os códigos HEX, RGB e HSL. Clicar num código copia-o de imediato. Tudo acontece no seu browser: nada é enviado.