Quatro harmonias de cores a partir de uma cor base
Escolha uma única cor e o gerador de paletas calcula as quatro harmonias clássicas do círculo cromático para ela: complementar, análoga, triádica e complementar dividida. Cada uma aparece como uma fileira de amostras que você copia com um clique, e o conjunto inteiro pode ser exportado de uma vez. Os cálculos rodam no seu navegador, então o resultado se atualiza na hora quando você muda a cor base, e a cor é gravada na URL para que você possa compartilhar ou salvar qualquer paleta nos favoritos.
Como usar
- Escolha uma cor base com o seletor de cores ou digite um código hex como
#FF5722. Os valores RGB e HSL aparecem logo abaixo. - Percorra as quatro paletas. Clique em qualquer amostra para copiar seu código hex.
- Pressione Exportar tudo para copiar todas as harmonias como propriedades personalizadas CSS, config do Tailwind, variáveis SCSS e JSON num único pacote.
- Pressione Compartilhar para copiar um link que abre o gerador com a mesma cor base.
Qual harmonia você deve usar?
- Complementar (duas cores a 180° de distância) oferece o contraste mais forte. Use para um botão primário sobre o fundo da marca.
- Análoga (vizinhas no círculo cromático) transmite calma e coesão. Combina com dashboards, apps de leitura e a maior parte da interface.
- Triádica (três cores a 120° de distância) é animada e equilibrada. Boa para ilustrações, gráficos e produtos infantis.
- Complementar dividida mantém o impacto da complementar, mas é mais fácil de equilibrar; uma escolha segura para páginas de marketing.
Dicas
- Parta de uma cor que você já tem, por exemplo a cor principal do seu logo, ou uma extraída de uma foto com o extrator de cores de imagem.
- As harmonias dão relações de matiz, não tonalidades. Crie tons mais claros e mais escuros de cada cor para fundos e textos.
- Passe as cores de texto pelo verificador de contraste; um par complementar pode ser vívido e ainda assim reprovar na WCAG como texto.
- Para uma paleta guiada por um clima ou história em vez de uma cor, use o gerador de paletas com IA.