Gerador de paletas de cores

Escolha uma cor base e propomos cores que combinam com ela segundo a teoria da cor, além de uma escala completa de tons claros e escuros (de 50 a 950) para usar no seu site ou aplicação.

Harmonias de cor

As harmonias baseiam-se na posição das cores no círculo cromático. A complementar usa a cor oposta (180°) e dá o máximo contraste; a análoga, as vizinhas (±30° e ±60°), tranquilas e naturais; a triádica, três cores a 120°; a complementar dividida, as duas vizinhas da oposta, mais fácil de equilibrar; e a tetrádica, quatro cores a 90°. A monocromática mantém o tom e varia a luminosidade.

Um conselho clássico é a regra 60-30-10: uma cor dominante em 60% do design, uma secundária em 30% e uma cor de destaque nos restantes 10%.

Escala de tons 50-950

Os sistemas de design como o Tailwind CSS, o Material ou o Bootstrap usam para cada cor uma escala de 50 (quase branco) a 950 (quase preto): os tons claros servem para fundos, os médios para botões e ligações e os escuros para textos e estados ativos.

Calculamos a paleta no espaço de cor OKLCH, que é percetualmente uniforme: ao rodar o tom ou mudar a luminosidade, as cores mantêm a mesma claridade aparente, o que não acontece com o HSL (em HSL, um amarelo e um azul com a mesma «luminosidade» parecem muito diferentes).