Como Usar o Gerador de Paletas de Cores

Este gerador gratuito de paletas de cores transforma uma única cor inicial num esquema completo e harmonioso, usando a matemática clássica da teoria das cores. Escolha uma cor base com a roda, com o cursor de matiz ou escrevendo um código hex e, em seguida, selecione uma regra de harmonia para ver ao instante um conjunto de cores correspondente. Cada amostra pode ser copiada para a área de transferência com um clique, pronta a colar diretamente no CSS, no Tailwind, no Figma ou em qualquer ferramenta de design.

• Escolha uma cor base — arraste o ponto na roda de cores, mova o cursor de matiz, escreva um valor hex de seis dígitos ou use o seletor de cor nativo na barra superior.
• Selecione uma regra de harmonia — abra a lista pendente “Harmonia de Cores” e escolha a relação que pretende (complementar, análoga, tríade e muito mais).
• Copie as suas cores — passe o cursor sobre uma amostra na tira da paleta para revelar o respetivo código hex e clique para o copiar.
• Verifique a acessibilidade — use o verificador de contraste WCAG integrado acima para confirmar que as cores do texto e do fundo são legíveis.
• Explore variações — percorra a grelha “Todas as Paletas de Harmonia” para comparar cada regra para a sua cor base, ou comece a partir de uma das paletas selecionadas.

As Sete Regras de Harmonia de Cores

As harmonias de cores descrevem como os matizes se relacionam entre si na roda de cores. Cada regra produz um ambiente e um nível de contraste diferentes:

• Complementar — dois matizes diretamente opostos um ao outro (a 180°). Contraste e energia máximos; ótima para apelos à ação.
• Análoga — matizes vizinhos (cerca de 30° de distância). Calma, coesa e de aspeto natural.
• Tríade — três matizes uniformemente espaçados a 120°. Vibrante mas equilibrada.
• Complementar Dividida — uma cor base mais os dois matizes que ladeiam o seu complemento. Contraste forte com menos tensão do que a complementar pura.
• Tetrádica — quatro matizes que formam um retângulo na roda. Rica e variada; funciona melhor com uma cor dominante.
• Quadrada — quatro matizes uniformemente espaçados a 90°. Arrojada e equilibrada, com igual peso visual.
• Monocromática — um único matiz com variações de luminosidade e saturação. Elegante, limpa e fácil de aplicar.

Verificar o Contraste das Cores para Acessibilidade

Uma paleta bonita continua a precisar de ser legível. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem rácios de contraste mínimos entre o texto e o respetivo fundo: 4.5:1 para texto corrido normal e 3:1 para texto grande, de modo a cumprir o nível AA, e 7:1 para o nível AAA, mais exigente. O verificador de contraste nesta página calcula o rácio exato entre quaisquer duas cores e mostra se passam no AA ou no AAA, para que possa ajustar a sua paleta antes de a publicar.

Perguntas Frequentes

O gerador de paletas de cores é gratuito?

Sim. A ferramenta é totalmente gratuita para projetos pessoais e comerciais, sem necessidade de registo.

Que formatos de cor suporta?

Pode introduzir e copiar cores como códigos hex, e cada cor gerada é calculada a partir dos respetivos valores HSL e RGB subjacentes.

Que regra de harmonia devo usar?

Use a complementar ou a complementar dividida para acentos de grande impacto, a análoga ou a monocromática para interfaces calmas e coesas, e a tríade ou a quadrada quando precisar de um esquema mais rico e com várias cores.