Gerar uma paleta de cores harmoniosas

Uma paleta monocromática dá um resultado calmo e profissional, ideal para sites corporate ou editoriais. As análogas oferecem uma variação suave, natural, útil para ambientes verdes ou oceânicos. A regra complementar ou triádica traz um contraste forte, perfeito para CTA e sites de e-commerce que querem captar a atenção.

Algumas regras impõem um número fixo de cores. Uma paleta complementar devolve sempre 2 cores (a tonalidade e o seu oposto na roda cromática), uma paleta triádica devolve 3, uma tetrádica devolve 4. O parâmetro de quantidade só é respeitado para as regras monocromática e análoga.

A geração apoia-se no espaço HSL, mais natural para manipular a tonalidade (rotação na roda cromática) e a luminosidade. As cores devolvidas são depois convertidas para o formato HEX para integração direta em CSS. Se precisar do formato RGB, utilize o conversor de cor em cada código gerado.

Comece por extrair a cor dominante da sua imagem com o extrator de paleta, pegue na tonalidade principal como cor de referência, e injete-a no gerador com uma regra análoga ou triádica. Obterá assim cores coerentes com o seu visual para vestir o resto do site.

O gerador não verifica os rácios de contraste. Uma cor só se torna acessível em relação com outra cor de fundo. Para validar um par texto/fundo, exporte os códigos HEX e utilize um verificador de contraste que calcula o rácio segundo as exigências WCAG (4.5:1 para texto normal em AA, 7:1 em AAA).

A paleta é devolvida em códigos HEX, prontos a colar numa folha CSS, num ficheiro de variáveis SASS, num tema Tailwind ou num sistema de tokens de design. Para obter os equivalentes RGB ou HSL, passe cada código pelo conversor de cor.