Gerador de Paletas de Cores

Por que uma boa paleta de cores sustenta um design inteiro

Escolha as cores erradas e as pessoas sentem isso antes de conseguir nomeá-lo. Uma página parece barata, um logotipo fica turvo, um gráfico vira ruído. Escolha as certas e o trabalho simplesmente encaixa: parece intencional, calmo, fácil de percorrer com os olhos. A cor faz muito trabalho silencioso, definindo o clima, guiando o olhar e dizendo ao leitor o que importa mais. Então uma paleta não é enfeite que você prega no final. É uma decisão que você toma cedo, e quase todo o resto se apoia nela.

A boa notícia é que você não precisa de um diploma de belas-artes para chegar a um esquema sólido. Você precisa de um punhado de regras da teoria das cores e de um jeito rápido de testar ideias. É exatamente para isso que serve um gerador: ele deixa você percorrer dezenas de combinações no tempo que antes levava para se debruçar sobre uma só.

Teoria das cores, sem o jargão

A maioria das harmonias vem de uma ideia simples: onde as cores ficam no círculo umas em relação às outras. Aprenda quatro padrões e você consegue ler ou construir quase qualquer esquema.

• Complementar usa duas cores diretamente opostas, como azul e laranja. É de alta energia e ótima para chamar a atenção, embora muito de ambas dispute o foco, então deixe uma liderar e use a outra como acento.
• Análoga usa três cores que ficam lado a lado, como vermelho, laranja e amarelo. É de baixo contraste, calma, e o tipo de harmonia que você vê por toda a natureza. Suave aos olhos, mas pode ser preciso acrescentar contraste em algum ponto para que as coisas não fiquem chapadas.
• Tríade usa três cores igualmente espaçadas no círculo, como vermelho, amarelo e azul. Vibrante e equilibrada, funciona melhor quando uma cor domina e as outras duas dão apoio.
• Monocromática mantém um único matiz e varia sua luminosidade e saturação. É o esquema mais à prova de falhas que existe, limpo e coeso, e uma boa opção de reserva quando nada mais parece certo.

Um gerador aleatório é divertido para inspiração, mas os modos de harmonia são onde está o real valor. Eles mantêm suas cores matematicamente relacionadas, de modo que parecem pertencer umas às outras mesmo antes de você ajustar qualquer coisa.

HEX, RGB e HSL em termos simples

Toda cor que você copia vem em algumas notações, e todas descrevem a mesma coisa de formas diferentes.

O HEX é o código de seis caracteres que você vê mais, como #3A7BD5. É apenas vermelho, verde e azul empacotados em uma única string, dois caracteres cada. É compacto e é o que você vai colar no CSS ou em uma ferramenta de design.

O RGB escreve esses mesmos três canais como números de 0 a 255, como rgb(58, 123, 213). A mesma cor, mais amigável de ler, e prática quando você quer um canal alfa para transparência.

O HSL descreve a cor do jeito que as pessoas de fato pensam: matiz (qual cor, 0 a 360 graus ao redor do círculo), saturação (quão vívida) e luminosidade (quão clara). É o formato mais fácil de ajustar à mão, já que mexer na luminosidade ou na saturação faz exatamente o que você esperaria, sem adivinhação. Se algum dia você precisar transitar entre formatos, uma rápida conversão de HEX para RGB torna isso indolor.

Não esqueça contraste e acessibilidade

Uma paleta pode parecer linda e ainda assim falhar no momento em que alguém tenta ler texto sobre ela. O contraste é onde o bonito encontra o utilizável. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) estabelecem uma régua clara: o texto de corpo normal deve atingir uma razão de contraste de pelo menos 4,5:1 contra o fundo, e texto grande, pelo menos 3:1. Isso não é burocracia, é a diferença entre um leitor que passa pela sua página com facilidade e um que aperta os olhos, desiste e vai embora.

A atitude prática é testar seus pares de primeiro plano e fundo enquanto você constrói, não depois. Cinza-claro sobre branco pode parecer elegante em um mockup e ficar invisível em um celular à luz do dia. Quando uma combinação falha, geralmente basta empurrar uma cor para mais escura ou mais clara, não jogar fora o esquema inteiro. Guarde suas cores de acento vivas para botões, links e destaques em vez de longos trechos de texto, e você desviará da maior parte dos problemas de contraste antes que comecem.

Um fluxo de trabalho prático

Aqui está um fluxo que se sustenta entre projetos. Comece com uma cor-âncora da qual você tem certeza, muitas vezes uma cor de marca ou um matiz que combine com o clima que você quer. Trave-a e deixe o gerador construir uma harmonia ao redor dela. Percorra complementar, análoga e tríade até algo parecer certo, e não pense demais na primeira tentativa; você está caçando uma direção, não a resposta final.

Depois que tiver uma candidata, atribua papéis. Escolha uma cor dominante para fundos e grandes áreas, uma secundária para a estrutura e um acento marcante para os trechos que precisam saltar. Uma divisão flexível de 60-30-10, dominante para secundária para acento, mantém tudo equilibrado sem parecer rígido. Então verifique o contraste em cada par de texto, copie os códigos hexadecimais e pronto. Salve as que funcionam, porque uma paleta que você acertou em um projeto costuma ser a semente do próximo. Quando estiver pronto para continuar criando, o resto da nossa coleção de todos os geradores dá conta das outras peças.

Perguntas frequentes