Círculo cromático interativo para harmonia de cores
O círculo cromático é uma roda HSL interativa que transforma uma única cor base em um esquema de cores pronto para usar. Clique ou arraste pela roda para escolher um matiz e veja surgirem na hora as combinações complementares, análogas, tríades e outras harmonias.
Ele foi feito para designers, artistas, desenvolvedores e qualquer pessoa que precise escolher cores para um site, uma marca, uma ilustração ou um ambiente. Em vez de adivinhar quais cores combinam, você vê as relações desenhadas na roda com pontos indicadores e linhas de conexão, e copia qualquer valor HEX com um único clique.
Como usar o círculo cromático
Escolha uma cor base
Clique ou arraste em qualquer ponto da roda para definir o seu matiz. Você também pode usar o seletor de Cor base ou digitar um código HEX (por exemplo #6366F1) para um ponto de partida exato.
Ajuste a saturação e a luminosidade
Use o controle de Saturação para definir a intensidade (0% cinza a 100% vívido) e o de Luminosidade para o brilho (0% preto, 50% cor pura, 100% branco). A roda e as amostras se atualizam ao vivo.
Escolha uma harmonia de cores
Selecione um dos seis modos de Harmonia de cores. A roda desenha pontos indicadores e linhas de conexão mostrando como as cores se relacionam, e uma nota curta explica quando usar cada esquema.
Copie suas cores
Cada amostra mostra o nome, o código HEX e o ângulo em relação à cor base. Clique em uma amostra para copiar o valor HEX para a área de transferência, pronto para colar em qualquer ferramenta de design ou no CSS.
Recursos
Círculo cromático interativo
Uma roda em canvas suave onde você clica ou arrasta para escolher qualquer matiz de 0° a 360°, com a prévia no centro mostrando sua cor atual.
Seis modos de harmonia de cores
Gere esquemas complementares, análogos, tríades, complementar dividida, tétrades e monocromáticos usados por designers profissionais.
Indicadores visuais de harmonia
Pontos indicadores e linhas de conexão na roda mostram exatamente como as cores de cada harmonia se relacionam com a sua cor base.
Controle de saturação e luminosidade
Ajuste qualquer cor com precisão usando controles ao vivo, cujos gradientes se atualizam para prever toda a variação do seu matiz atual.
Seletor de cor e entrada HEX
Defina uma cor base precisa com o seletor de cor nativo ou digitando diretamente um código HEX de seis dígitos.
Cópia com um clique
Clique em qualquer amostra para copiar na hora o valor HEX para a área de transferência, com cada amostra identificada e mostrando o ângulo em relação à base.
Teoria das cores integrada
Cada modo de harmonia inclui uma breve descrição do que faz e de quando usar, para você aprender teoria das cores enquanto trabalha.
Responsivo e modo escuro
Toque e mouse funcionam no computador, no tablet e no celular, com um tema escuro integrado e confortável.
Perguntas frequentes
Como uso o círculo cromático para montar um esquema?
Escolha uma cor base clicando na roda ou digitando um código HEX, depois selecione um modo de Harmonia de cores, como Complementares ou Tríades. As cores correspondentes aparecem como amostras com seus valores HEX, prontas para copiar para o seu design.
O que são cores complementares?
Cores complementares ficam diretamente opostas na roda, a 180° de distância. Esse par cria o contraste mais forte, o que é ótimo quando você quer que elementos se destaquem e chamem a atenção.
O que são cores análogas e tríades?
Cores análogas são três vizinhas na roda (cerca de ±30° da base), formando esquemas calmos e coesos. As tríades são três matizes espaçados a 120°, oferecendo uma paleta vibrante e equilibrada — muitas vezes melhor com uma cor dominante.
Qual a diferença entre complementares e análogas?
A complementar usa cores opostas para gerar alto contraste e energia, enquanto a análoga usa cores vizinhas para uma sensação suave e harmoniosa. Escolha a complementar quando quiser destaque e ênfase; escolha a análoga para designs relaxados e unificados.
O que significam os números de grau em cada amostra?
Os graus são o ângulo daquela cor na roda em relação à sua cor base. Uma cor complementar mostra 180° (diretamente oposta), e as tríades mostram 120° e 240° — o espaçamento igual que define cada harmonia.
Consigo os valores HEX para usar no meu software de design?
Sim. Cada amostra exibe um código HEX e, ao clicar nela, o valor é copiado para a área de transferência. O HEX funciona no Photoshop, Figma, Sketch, CSS e em quase qualquer ferramenta de design. Para impressão, converta essas cores de tela em CMYK no seu software.
Por que as cores mudam quando eu movo os controles?
A roda usa o modelo HSL, então a Saturação controla o quanto uma cor parece vívida ou acinzentada e a Luminosidade controla o quanto ela é clara ou escura. A roda inteira e cada amostra se redesenham com as suas configurações atuais, para você prever exatamente como a harmonia vai ficar — e não cores puras teóricas.
Ainda não há comentários. Seja o primeiro a comentar!