Como Gerar uma Paleta de Cores para Seu Design

A cor é uma das primeiras coisas que as pessoas notam num site, app ou design. Uma paleta bem escolhida cria um aspeto coeso e profissional. Uma mal escolhida faz com que até bom conteúdo pareça estranho, e problemas de acessibilidade podem excluir silenciosamente milhões de utilizadores. Não precisa ser designer para escolher boas cores. A teoria da cor dá-lhe fórmulas fiáveis, e as ferramentas que combinam essas fórmulas com verificações de acessibilidade transformam uma paleta utilizável num trabalho de cinco minutos.

Uma breve história da teoria da cor

Isaac Newton construiu a primeira roda de cores por volta de 1666, mapeando o espectro visível num círculo ao dobrar o arco-íris linear sobre si mesmo. Johann Wolfgang von Goethe expandiu a ideia em 1810 com a sua Teoria das Cores, focando-se em como as cores se sentem e não em como são fisicamente compostas. Albert Munsell sistematizou-a em 1905 ao separar matiz, valor e croma, dando aos designers vocabulário para "vermelho mais escuro" vs "vermelho mais saturado".

O século XX trouxe os espaços de cor percetuais. CIE Lab (1976) foi o primeiro a tornar "distância numérica igual = diferença percebida igual" um objetivo real. HSL e HSV (1978) deram aos programadores abstrações mais fáceis. O design web moderno passou para OKLCH (2020) e OKLAB, espaços de cor percetualmente uniformes que finalmente fazem que "luminosidade 50%" pareça mesmo 50% brilhante, independentemente do matiz. A progressão importa porque permite aos geradores de paletas produzir matizes e tons que parecem consistentes entre cores, não apenas relacionados numericamente.

Modos de harmonia de cor

Os modos de harmonia baseiam-se nas relações entre cores na roda de cores. Cada um cria uma sensação diferente:

Complementar, duas cores diretamente opostas (por exemplo, azul e laranja, vermelho e verde). Alto contraste, enérgico. Bom para elementos de chamada à ação que precisam destacar-se, mas use com moderação porque a tensão pode soar alta.

Análogo, três cores lado a lado na roda (por exemplo, azul, azul-verde, verde). Harmonioso e calmante. Bom para fundos, designs com tema natural, e paletas onde tudo deve sentir-se relacionado.

Tríade, três cores uniformemente espaçadas na roda (por exemplo, vermelho, amarelo, azul). Vibrante e equilibrado. Bom para designs lúdicos, criativos ou infantis.

Complementar dividido: uma cor mais as duas cores adjacentes ao seu complemento. Contraste semelhante ao complementar mas com menos tensão; muitas vezes mais utilizável em interfaces.

Tetrádico (ou retângulo): quatro cores dispostas como dois pares complementares. Rico e variado, mas difícil de equilibrar; normalmente uma cor domina e as outras servem de acentos.

Quadrado: quatro cores uniformemente espaçadas na roda. Variedade máxima, ênfase igual. Difícil de usar bem a menos que três das quatro sejam mantidas como pequenos acentos.

Monocromático: diferentes matizes, tons e tonalidades de uma única cor. Sempre harmonioso, sofisticado, mas pode faltar interesse visual se for usado em excesso. Excelente para layouts editoriais e sistemas de marca minimalistas.

Acromático: apenas preto, branco e cinzento. O look clássico de jornal ou revista de alto contraste. Frequentemente combinado com um único acento brilhante.

Como gerar uma paleta

1. Escolha um modo de harmonia: selecione Aleatório, Análogo, Complementar, Tríade, Complementar dividido, Tetrádico ou Monocromático para definir as relações entre as cores.
2. Escolha uma cor inicial: introduza uma cor de marca, retire uma cor de uma imagem de referência, ou deixe o gerador escolher uma.
3. Bloqueie as cores de que gosta: quando encontrar uma cor que queira manter, bloqueie-a e regenere as outras até a paleta inteira funcionar.
4. Ajuste luminosidade e saturação: a maioria dos geradores permite afinar de forma independente luminosidade e saturação de cada cor para garantir que a paleta tem variação de brilho suficiente para trabalho de UI.
5. Execute uma verificação de acessibilidade: verifique que as combinações texto-fundo cumprem contraste WCAG AA (4,5:1) ou AAA (7:1).
6. Exporte, copie os códigos HEX, variáveis CSS, configuração Tailwind, amostras ASE, ou guarde a paleta como imagem para ferramentas como Figma, Sketch ou Canva.

Construir uma paleta utilizável

Uma paleta é mais do que um conjunto de cores bonitas. Para um projeto real, normalmente precisa de:

Um padrão moderno comum é uma escala de luminosidade de 10 passos (50, 100, 200, ..., 900) para cada cor, dando matiz suficiente para botões, estados hover, estados desativados e equivalentes em modo escuro sem ajustes manuais.

Espaços de cor e como afetam as paletas

O espaço em que gera molda como as cores se relacionam. As ferramentas modernas permitem alternar.

Para a maior parte do trabalho web em 2024, gere em OKLCH e exporte para HEX para compatibilidade. O CSS aceita agora oklch() nativamente em browsers modernos, por isso também pode manter os valores OKLCH diretamente na sua folha de estilos para uma manipulação de cor mais rica.

Acessibilidade, não só estética

Uma paleta linda é inútil se parte do seu público não conseguir ler. Três verificações transformam uma paleta bonita numa paleta inclusiva.

Os rácios de contraste WCAG medem o quão distinguível o texto é do seu fundo. Os limites padrão:

Simulação de daltonismo: 8% dos homens e 0,5% das mulheres têm alguma deficiência de visão de cor, mais comumente vermelho-verde. Passe a sua paleta por um simulador (deuteranopia, protanopia, tritanopia) para garantir que a informação não é transmitida apenas pela cor.

APCA (Advanced Perceptual Contrast Algorithm) é o substituto candidato ao contraste WCAG no WCAG 3.0. Modela melhor a perceção que a fórmula antiga e importa para texto em fundos subtilmente diferentes; use-o como segunda opinião junto com WCAG 2.x.

Dicas para obter os melhores resultados

• Comece por uma cor, escolha uma cor primária de que goste, depois use um modo de harmonia para encontrar cores que a complementem. É mais fácil do que tentar escolher 5 cores de forma independente.
• Teste com conteúdo real, uma paleta que parece ótima em amostras pode não funcionar aplicada a texto, botões e fundos reais. Teste sempre com UI real.
• Gere escalas de luminosidade, em vez de escolher um único "azul", gere uma escala de 10 passos do muito claro ao muito escuro. Use os passos mais claros para fundos, os mais escuros para texto e o intervalo médio para acentos.
• Menos é mais, um design com 3 cores bem escolhidas parece mais profissional do que um com 7. Use neutros para a maior parte da interface e reserve as cores fortes para o que importa.
• Inspire-se na fotografia, use o conta-gotas sobre uma foto de referência para obter paletas ancoradas no mundo real. Coolors, Color Hunt e extratores de foto dedicados fazem-no num clique.
• Atenção ao modo escuro, gere variantes claras e escuras em conjunto. Uma primária que funciona em branco pode brilhar de forma desconfortável em preto; OKLCH permite ajustar só a luminosidade sem mover o matiz.
• Guarde o porquê, documente porque cada cor é como é (alinhamento de marca, restrição de acessibilidade, humor). O seu eu futuro vai agradecer ao presente.

Armadilhas comuns

• Escolher cores em HSL e renderizar em HSL, valores iguais de luminosidade em HSL parecem desiguais porque o espaço não corresponde à perceção humana. Amarelo a 50% de luminosidade parece muito mais brilhante que azul a 50%. Mude para OKLCH para tons uniformes.
• Confiar só na roda de cores, a roda é um ponto de partida, não uma garantia. Verifique sempre o contraste com texto real antes de fechar.
• Ignorar o significado cultural, vermelho sinaliza sorte na China e aviso no Ocidente. Branco significa pureza no Ocidente e luto em partes da Ásia. Se faz produto global, faça pesquisa local.
• Demasiados cinzentos, quatro ou cinco passos neutros costumam cobrir tudo, de texto a contornos subtis. Doze confundem toda a gente, incluindo o seu eu futuro.
• Preto puro sobre branco puro, o contraste extremo pode causar fadiga visual. Use quase-preto (#1A1A1A) sobre quase-branco (#FAFAFA) para leituras longas.
• Combinações por testar, uma cor que passa o contraste contra o fundo não passa automaticamente contra todas as outras superfícies. Teste cada par que o seu design realmente produz.
• Um único acento por página, um acento forte que puxa o foco é bom. Dois acentos a lutar pela atenção é mau. Escolha a chamada à ação mais importante.
• Cores de marca que falham em acessibilidade, o logótipo da empresa pode usar um par de baixo contraste por razões emocionais; o site não pode. Gere variantes acessíveis para a UI e reserve o par de marca para o lockup do logótipo.
• Esquecer links e estados visitados, ambos precisam de ser distinguíveis do corpo de texto e entre si. Teste os três.
• Deixar o gerador escolher cores semânticas, as cores de sucesso/aviso/erro têm expectativas culturais e de acessibilidade. Escolha por convenção (verde/âmbar/vermelho) e verifique que ficam bem com a sua paleta.

Ferramentas e abordagens alternativas

Para trabalho de marca refinado, combine um gerador de paleta com um verificador de contraste e um simulador de daltonismo. As ferramentas que fazem os três num só local poupam mais tempo.

Privacidade e o gerador de paletas

O gerador de paletas corre inteiramente no seu browser. Qualquer imagem fonte que carregue para extração de cor é lida com a API FileReader, amostrada num canvas fora do ecrã, e descartada assim que as cores são extraídas. Nada é enviado, nada é registado, e a paleta que constrói não é associada a si. Para trabalho de marca não anunciado, imagens de moodboard vazadas ou fotografias de cliente, esse fluxo só-local mantém tudo na sua máquina onde deve ficar. Para uma tarefa tão rotineira como escolher cores, o nível de privacidade por defeito deve ser: nada sai da página, nada é armazenado, nada é partilhado.