Explorador de harmonias de cores

• Roda de cores interativa: o explorador desenha uma roda de cores ao vivo em que você pode clicar para escolher qualquer matiz. Os pontos de harmonia se atualizam na hora enquanto você se move pela roda, mostrando exatamente onde cai cada cor da harmonia.
• Cálculo instantâneo de harmonias: todos os sete tipos de harmonia - complementar, complementar dividida, análoga, triádica, tetrádica, complementar dividida dupla e monocromática - se atualizam em tempo real quando você muda a cor base.
• Processamento seguro e privado: seus dados de cor nunca saem do seu dispositivo. O explorador roda inteiramente no seu navegador com renderização baseada em canvas, então nenhum dado é enviado.
• 100% grátis para sempre: use este explorador sem cadastro, assinaturas, limites de taxa ou paywalls escondidos. Explore quantas combinações de cores quiser, totalmente de graça.

Um explorador de harmonias de cores é uma ferramenta que visualiza as relações matemáticas entre cores na roda de cores. A teoria da harmonia de cores define relações angulares específicas entre matizes que produzem combinações visualmente agradáveis - por exemplo, cores separadas por 180° (complementares) criam alto contraste, enquanto cores separadas por 30° (análogas) criam transições suaves e naturais. Este explorador desenha uma roda de cores interativa, calcula os sete tipos principais de harmonia a partir da sua cor base e exporta os resultados como variáveis CSS - tudo rodando localmente no seu navegador.

1. Informe ou escolha uma cor base: digite um código de cor HEX no campo de entrada, ou clique em qualquer ponto da roda de cores para escolher um matiz. Os pontos de harmonia se atualizam na hora na roda.
2. Selecione um tipo de harmonia: clique em qualquer um dos sete cartões de harmonia para ver suas cores destacadas na roda e exibidas como amostras individuais com valores HEX e HSL.
3. Copie ou exporte a paleta: clique em qualquer amostra para copiar seu valor HEX, use Copiar HEX para copiar todas as cores de uma vez, ou use a exportação de variáveis CSS para copiar um bloco de propriedades personalizadas CSS pronto para uso.

• Complementar: duas cores diretamente opostas na roda (a 180°). Cria contraste e tensão visual máximos - ideal para botões de chamada para ação e designs de alto impacto.
• Complementar dividida: a cor base mais duas cores adjacentes ao seu complementar (±30° em relação ao complementar). Menos tensão que a complementar, mas ainda com alto contraste - uma escolha mais segura para a maioria dos designs.
• Análoga: cinco cores adjacentes na roda (±30° e ±60°). Harmônica e de aparência natural - comum na natureza e usada para designs calmos e coesos.
• Triádica: três cores igualmente espaçadas em intervalos de 120°. Vibrante e equilibrada - oferece forte contraste visual mantendo a harmonia.

O explorador de harmonias de cores calcula as relações de harmonia apenas pelo ângulo de matiz, preservando a saturação e a luminosidade da sua cor base em todas as cores da harmonia. Na prática, você pode querer ajustar a saturação e a luminosidade de cada cor de harmonia conforme o contexto do seu design. A exportação de variáveis CSS usa nomes genéricos (--color-1, --color-2…) - renomeie-os para seguir as convenções do seu sistema de design antes de usar em produção.