Guias

Como Escolher uma Paleta de Cores: Um Guia Passo a Passo

Pela Equipa do colorPaletteFinder••10 min de leitura

Nunca, uma única vez, comecei uma paleta abrindo um seletor de cores à procura de "cores bonitas". É o caminho mais rápido para o problema exato que este guia existe para resolver: um ecrã cheio de cores individualmente bonitas que não têm razão nenhuma para estarem juntas. Escolher uma paleta é um processo, não um momento de inspiração, e o processo é repetível. Faça-o na mesma ordem todas as vezes e obtém um esquema coerente e acessível em quinze minutos, em vez de três dias a ajustar valores hexadecimais.

O que se segue é o fluxo de trabalho que realmente uso, de princípio a fim, com códigos hexadecimais reais e os compromissos em cada passo. Pode correr tudo com uma roda de cor e um verificador de contraste — vou apontar onde o gerador de paletas de cores faz a aritmética por si, mas o método importa mais do que a ferramenta.

Passo 1: Decida de onde vem a paleta

Antes de escolher uma única cor, responda a uma pergunta — o que ancora esta paleta? Há apenas quatro respostas honestas, e elas mudam tudo o que vem a seguir.

A maioria das pessoas salta este passo e, em silêncio, cai no "cor-âncora" sem o admitir, o que está bem se for uma escolha deliberada. A armadilha é escolher uma cor de ambiente emocionalmente e depois descobrir que ela luta com a sua marca. Nomeie o seu ponto de partida em voz alta. Se for ambiente, vale a pena ler a psicologia da cor no branding antes de se comprometer, porque as associações são mais culturalmente específicas do que se costuma supor.

Passo 2: Escolha uma matiz base e fixe-a

Seja qual for o seu ponto de partida, reduza-o a uma única matiz base. Uma cor. É esta a semente a partir da qual tudo o resto cresce, e tentar escolher três ou quatro cores "principais" de uma vez é precisamente a razão pela qual as paletas correm mal — não há espinha dorsal.

Se tem uma cor de marca, essa é a sua base. Se está a trabalhar a partir do ambiente, escolha a matiz que carrega a sensação: azuis e verdes-azulados frios para calma e confiança, laranjas e vermelhos quentes para energia (a distinção entre quente e frio é a alavanca mais rápida que tem sobre o ambiente). Depois fixe o seu HSL, porque a matiz, a saturação e a luminosidade são os três botões que vai realmente girar para o resto do processo. Uma base como #2563EB é, grosso modo, H 217, S 91, L 60 — um azul saturado e de tom médio-claro.

Penso deliberadamente em HSL aqui, em vez de hexadecimal, porque as regras de harmonia do próximo passo são angulares — têm tudo a ver com rodar o valor H à volta de uma roda de 360 graus. Se hexadecimal, RGB e HSL ainda lhe parecem intermutáveis, vale a pena ler esta análise dos três formatos; o HSL é o que torna a construção de paletas intuitiva.

Passo 3: Escolha uma regra de harmonia para *esta* situação

Agora roda à volta da roda para encontrar cores que se relacionam com a sua base por uma distância geométrica fixa. É só isso uma regra de harmonia — uma receita para escolher pontos no círculo em ângulos específicos, para que o olho os leia como uma família em vez de um acidente. Há sete regras clássicas, e a verdade honesta é que só precisa de duas ou três delas na maior parte do tempo.

É assim que escolho de facto, por situação e não listando definições:

A minha recomendação por omissão para uma primeira paleta a sério é a complementar dividida, exatamente pelas razões desta comparação com a tríade: é mais tolerante do que a complementar pura e mais contida do que um esquema de três matizes. Se quiser a geometria completa de cada regra, perceber a harmonia de cor no design de UI apresenta as sete. Defina a roda para a regra que escolheu, e o gerador cospe os códigos hexadecimais relacionados instantaneamente — mas agora já sabe porque apareceram aquelas cores em particular.

Passo 4: Atribua proporções antes de atribuir cores

É este o passo que separa as paletas que funcionam das paletas que apenas "condizem", e é o que quase toda a gente salta. A harmonia diz-lhe quais cores têm permissão para estar na sala. Não diz nada sobre quanto de cada usar — e três cores perfeitamente harmoniosas usadas em quantidades iguais são o seu próprio tipo de feio, uma discussão equilibrada onde toda a gente grita ao mesmo volume.

Atribua papéis usando, grosso modo, uma divisão 60/30/10:

O erro mais comum que vejo é usar as matizes harmoniosas em saturação máxima ao longo de grandes áreas. O seu #2563EB base é deslumbrante num botão e exaustivo como fundo de página inteira. As grandes superfícies querem a versão dessaturada e clareada; a matiz pura fica reservada para os 10%. Se quiser as proporções explicadas em profundidade, a regra 60/30/10 vai mais longe, mas o essencial é simples: escolha as suas cores e depois decida impiedosamente com quão pouco da estridente se consegue safar.

Passo 5: Verifique o contraste — a harmonia não garante legibilidade

Eis o facto que apanha as pessoas: a roda de cor não diz nada sobre contraste. Duas cores podem ser perfeitamente harmoniosas e completamente ilegíveis juntas. A harmonia e a acessibilidade são problemas independentes, e tem de resolver ambos.

Passe cada par de texto-sobre-fundo e de elemento de UI por um verificador de contraste. Os objetivos, diretamente do W3C, não são negociáveis se se importa com os seus utilizadores:

São valores-limiar, por isso não arredonde para cima: um 4.49:1 calculado falha a fasquia dos 4.5:1. O verificador WCAG do gerador sinaliza isto ao vivo enquanto emparelha cores, que é o momento de descobrir que a sua bela combinação de acento-sobre-secundária é ilegível — e não depois de a ter publicado. Para o panorama completo de AA versus AAA e de onde vêm os rácios, veja os rácios de contraste WCAG explicados e o canónico critério de sucesso 1.4.3 da WCAG.

Mais uma verificação que não custa nada: não deixe que a cor seja a única coisa a carregar significado. Cerca de 1 em cada 12 homens tem alguma forma de deficiência da visão das cores, mais frequentemente vermelho-verde, por isso um erro vermelho e um sucesso verde que diferem apenas na matiz são invisíveis para uma fatia real do seu público. Combine a cor com um ícone, uma etiqueta ou uma posição. Uma abordagem amiga dos daltónicos é sobretudo sobre redundância, não sobre evitar cores.

Passo 6: Teste em contexto real e depois itere

As amostras mentem. Uma paleta que parece equilibrada como cinco retângulos lado a lado comporta-se de forma completamente diferente quando é um layout real — porque a área, a adjacência e a quantidade de espaço em branco mudam todas a forma como as cores são lidas. O exemplo clássico: um acento que parece manso como uma pequena ficha torna-se avassalador como um banner de largura total, e um par que passou no contraste como grandes blocos falha assim que o texto tem 14px.

Por isso, antes de se comprometer, largue a paleta em algo que se pareça com o produto real — um botão, um cartão, um cabeçalho, um parágrafo de texto real. Olhe para ela num ecrã de telemóvel barato à luz do dia, não só no seu monitor calibrado. Depois itere ajustando a saturação e a luminosidade, quase nunca a matiz. Se algo parecer mal, a sua harmonia costuma estar bem; são as proporções ou os valores tonais que precisam de trabalho. Puxe a dominante para mais clara, tire saturação a uma superfície, aprofunde um acento até o contraste passar.

Se está a construir tanto para claro como para escuro, planeie-o agora em vez de inverter mais tarde — o modo escuro não é "a mesma paleta virada do avesso", e as paletas de cores em modo escuro cobre porque é que dessaturar os seus acentos para fundos escuros importa. E no momento em que a sua paleta ultrapassar um punhado de amostras, gradue cada cor para uma escala tonal própria e nomeie-as por papel, que é toda a premissa dos tokens de cor escaláveis.

A versão curta

Escolher uma paleta são seis decisões por ordem, não um palpite com sorte. Nomeie o seu ponto de partida. Reduza-o a uma matiz base. Rode a roda com uma regra de harmonia que sirva o trabalho — complementar dividida se estiver em dúvida. Atribua proporções 60/30/10 antes de se apaixonar por qualquer cor. Verifique o contraste contra os números da WCAG, porque a roda não o faz. Depois teste-a num layout real e ajuste a luminosidade, não a matiz.

Faça isto em sequência e o problema do "como combinar cores que ficam bem juntas" dissolve-se em grande parte — não porque teve sorte com o bom gosto, mas porque cada cor do conjunto mereceu o seu lugar pela relação, pelo papel e pelo rácio. É essa a diferença entre uma paleta e um monte de cores que por acaso são bonitas.

Perguntas Frequentes

Por onde devo começar ao escolher uma paleta de cores?

Comece por nomear o que ancora a paleta: uma cor de marca existente, um ambiente que quer transmitir, o conteúdo que o produto serve, ou uma única cor-âncora de que goste. Essa escolha condiciona tudo o resto. Depois reduza isso a uma única matiz base e construa a partir daí. O erro é cair no 'escolho uma cor de que goste' sem decidir qual dessas quatro está realmente a comandar a decisão.

Qual é a melhor regra de harmonia de cor para iniciantes?

A complementar dividida. Agarre na sua cor base, encontre o seu oposto na roda e use as duas matizes que ladeiam esse oposto. Dá-lhe grande parte do contraste de um esquema complementar com menos cansaço visual, além de uma segunda cor de acento de graça. É mais tolerante do que a complementar pura e mais contida do que uma paleta em tríade, o que a torna difícil de fazer ficar feia.

Quantas cores deve ter uma paleta?

Menos do que pensa. Para a maioria das interfaces, uma dominante quase neutra, uma secundária e um acento — três papéis funcionais — chegam, mesmo que cada um se expanda depois numa escala tonal. A divisão 60/30/10 é sobre proporção, não apenas contagem: cerca de 60% dominante, 30% secundária e 10% ou menos de acento. A visualização de dados é a exceção, onde precisa genuinamente de quatro ou mais cores de categoria distinguíveis.

Uma paleta harmoniosa cumpre automaticamente os padrões de acessibilidade?

Não. A roda de cor descreve relações de matiz e não diz nada sobre contraste, por isso duas cores perfeitamente harmoniosas podem ser ilegíveis juntas. Tem de verificar o contraste à parte. O Nível AA da WCAG exige 4.5:1 para texto normal, 3:1 para texto grande e pelo menos 3:1 para componentes de UI e gráficos. Trate a harmonia e a acessibilidade como dois problemas independentes e resolva ambos.

Como garanto que as minhas cores combinam mesmo?

Escolha-as por relação, não a olho. Escolha uma matiz base e depois use uma regra de harmonia na roda de cor para encontrar cores relacionadas a distâncias angulares fixas — é isso que as faz serem lidas como uma família. A seguir, atribua a cada uma um papel e uma proporção (dominante, secundária, acento) e verifique o contraste. As cores 'combinam' por causa da geometria, do papel e do rácio, não por sorte.

Quer experimentar com cores?

Experimente o nosso gerador de paletas de cores gratuito para encontrar a harmonia perfeita — com um verificador de contraste WCAG integrado.

Abrir o Gerador