Gerador de paletas de cores

Como usar o gerador de paletas de cores

1. Escolhe uma Cor base com a amostra de cor, ou escreve qualquer código em Código da cor base (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), um nome CSS…).
2. Escolhe uma Harmonia: Complementar, Análoga, Triádica, Complementar dividida, Tetrádica (retângulo), Quadrada ou Monocromática.
3. Escolhe o Círculo cromático: HSL (clássico) ou OKLCH (percetual). A paleta atualiza-se sempre que mudas uma opção; Gerar paleta também a atualiza.
4. Copia uma única cor com o botão Copiar por baixo da amostra, ou escolhe um formato em Exportar como (Lista HEX, Variáveis CSS, Variáveis SCSS, Array JSON ou Cores Tailwind) e usa Copiar ou Transferir para a paleta completa.

Cada amostra mostra o seu código HEX a preto ou a branco, consoante o que tiver melhor contraste, e a sua posição em relação à cor base (por exemplo +120°).

As harmonias de cores

As harmonias de cores são ângulos fixos no círculo cromático. A partir da tonalidade base, a ferramenta roda a tonalidade e mantém a saturação e a luminosidade da cor base.

• Complementar (0°, 180°): a cor oposta. Contraste máximo, ótima para um botão de chamada para a ação sobre a cor principal da marca.
• Análoga (−60°, −30°, 0°, +30°, +60°): vizinhas no círculo. Combinações calmas e naturais que funcionam bem em fundos e ilustrações.
• Triádica (0°, 120°, 240°): três tonalidades igualmente espaçadas. Viva e equilibrada; normalmente uma cor domina e as outras duas servem de destaque.
• Complementar dividida (0°, 150°, 210°): as duas vizinhas da complementar. Contraste forte com menos tensão do que um par complementar puro.
• Tetrádica (retângulo) (0°, 60°, 180°, 240°): dois pares complementares. Paletas ricas que precisam de uma cor dominante para se manterem coerentes.
• Quadrada (0°, 90°, 180°, 270°): quatro tonalidades igualmente espaçadas.
• Monocromática: uma tonalidade em cinco níveis de luminosidade, do escuro ao claro. Ideal para estados de interface, gráficos e designs discretos.

Círculo HSL ou OKLCH?

O círculo HSL (clássico) é o tradicional, usado pela maioria das ferramentas de design e tutoriais. A desvantagem é que ângulos iguais não parecem igualmente claros: o amarelo a 60° parece muito mais claro do que o azul a 240° com a mesma luminosidade HSL.

O círculo OKLCH (percetual) roda a tonalidade no modelo de cor Oklab, concebido para que a luminosidade pareça consistente. As paletas criadas com ele têm cores de peso visual semelhante, o que ajuda a garantir um contraste acessível. Algumas cores rodadas podem ficar fora do que um ecrã consegue mostrar; a ferramenta reduz então ligeiramente o croma para as manter apresentáveis.

Usar a paleta exportada

Variáveis CSS produzem um bloco :root com --color-1, --color-2… que podes colar numa folha de estilos. Variáveis SCSS dão linhas $color-1: …;, Array JSON dá uma lista de strings HEX para scripts, e Cores Tailwind dá um objeto colors com as chaves 100, 200, 300… para colares na tua configuração do Tailwind.

Antes de publicares, verifica o contraste do texto: uma harmonia garante tonalidades agradáveis, não texto legível. Usa neutros escuros ou claros para o corpo do texto e reserva as cores saturadas da paleta para destaques, botões e grafismos.