Escolha uma paleta de cores partindo de uma cor para a qual você tem um motivo de verdade — uma cor de marca, uma cor de produto, algo em uma fotografia que você não pode mudar — e derive dela todo o resto. Uma paleta que funciona é um tom dominante, um acento distante o bastante dele para ser notado, cinco ou seis neutros que vão cobrir a maior parte da tela e quatro ou cinco variantes de cada cor para os estados hover, focus e disabled. Uma regra de harmonia decide exatamente uma dessas coisas. É por isso que uma paleta que parece confiante como uma fileira de amostras ainda pode desmoronar assim que encontra uma página real.
De onde vem a primeira cor
Nenhum gerador responde "de que cor a minha coisa deveria ser". Responda isso com uma restrição em vez de com gosto pessoal, porque uma restrição dá para defender seis meses depois e uma preferência não:
- Uma cor de marca que você já tem. Se existe uma, ela é a base, quer você goste dela ou não.
- A cor dominante da fotografia ao lado da qual o design precisa conviver. Cor de interface brigando com fotografia de produto é uma briga que a fotografia ganha.
- A convenção da categoria — finanças puxam para o azul, comida para os tons quentes, ferramentas para desenvolvedores para o escuro. Quebrar uma convenção é aceitável, mas faça isso de propósito.
- Aquilo que o seu concorrente mais próximo não pegou. Dois logos azuis no mesmo mercado são um logo azul de que as pessoas lembram e outro de que não.
Qualquer que seja a escolha, escolha uma versão saturada. Você sempre pode drenar a saturação depois. O que você não consegue é girar o tom de algo que já está quase cinza e esperar que as outras amostras pareçam diferentes — elas voltam como cinco cores quase idênticas com cinco códigos hex genuinamente diferentes, que é o modo de falha mais confuso que existe.
Qual regra de harmonia escolher
As seis regras de sempre são a mesma operação: pegue o seu tom base, ande um número fixo de graus pela roda, mantenha a saturação, ajuste a luminosidade. Os nomes soam como teoria e descrevem aritmética.
| Regra | O que faz | Use quando |
|---|---|---|
| Monocromática | Um tom, várias luminosidades | Você quer calma e vai pegar um acento emprestado de outro lugar |
| Análoga | Vizinhos dentro de uns 60° | Coerência importa mais do que qualquer elemento isolado se destacar |
| Complementar | O tom a 180° de distância | Um elemento — normalmente um botão — precisa gritar |
| Complementar dividida | Os dois tons de cada lado do oposto | Você quer esse contraste sem a borda vibrante que os complementares puros criam |
| Tríade / quadrado | Três ou quatro tons, igualmente espaçados | A cor é conteúdo: ilustração, gráficos, uma página de marketing |
Ler sobre elas é mais lento do que olhar para elas. Jogue a sua cor base no gerador de paletas daqui e percorra as seis regras; você descobre rápido quais duas valem a pena considerar, e a caixa de exportação entrega os hex como custom properties de CSS, variáveis de SCSS, um array JSON ou uma lista simples.
Espere uma surpresa. Essas regras rodam na roda RGB que a sua tela usa, não na roda vermelho-amarelo-azul da aula de artes. Oposto ao azul você recebe amarelo, não laranja. Nenhuma das duas está errada — pigmento e luz se comportam de formas diferentes —, mas esse descompasso costuma ser o motivo de um resultado complementar parecer estranho.
Quantas cores você precisa de verdade
Cinco amostras são um resultado, não um plano. Quase toda interface que parece bem desenhada roda com dois tons: um dominante e um acento, com todo o resto carregado pelos neutros.
A orientação comum é mais ou menos 60% da superfície na cor dominante, 30% em uma secundária e 10% no acento. Aceitando ou não esses números exatos, o que está por trás deles é real: uma paleta é proporção, e uma fileira de amostras do mesmo tamanho esconde a proporção por completo. Duas cores que parecem equilibradas lado a lado podem ser insuportáveis quando uma delas é o fundo da página e a outra é cada título.
O teste barato é pintar a coisa real: fundo, um card, um título, um parágrafo, um botão, um link. Cinco minutos disso ganham de uma hora encarando amostras.
A maior parte da sua paleta é cinza
Conte os pixels de fato coloridos em qualquer produto que você admira. Texto, bordas, divisórias, fundos, controles disabled, texto de placeholder: tudo neutro, e nenhuma regra de harmonia gera um só deles. É por isso que "escolher uma paleta" parece terminado muito antes de estar.
Construa seis e dê a eles papéis em vez de números: fundo de página, superfície elevada, borda, texto discreto, texto de corpo, títulos. Duas coisas fazem com que pareçam deliberados:
- Dê um tom a eles. Misture alguns pontos do seu tom base em cada um: entre 4 e 8% de saturação basta para notar e não basta para ler como cor. O
#808080puro é o equivalente visual de Times New Roman. - Não use preto puro para texto. Algo em torno de
#1A1A1Asobre branco ainda passa do limite de 4.5:1 com folga, e se lê como uma decisão em vez de um padrão que ninguém mudou. Preto puro é uma convenção da impressão, onde o papel não está emitindo luz na sua direção.
Cada cor precisa de quatro ou cinco versões
Um botão não é uma cor. Ele é uma cor em repouso, uma cor de hover, uma cor ativa, um anel de focus e um estado disabled, e se você só definiu a primeira, as outras quatro vão ser inventadas no aperto por quem estiver escrevendo o componente.
Derive cada uma delas movendo a luminosidade, não o tom: de 6 a 10 pontos mais escuro para o hover em um tema claro, um pouco mais para o ativo. Mantenha o tom e a saturação fixos, ou o botão muda de identidade quando você encosta nele. O anel de focus é o que precisa de planejamento, porque ele tem que ficar visível contra o botão e contra o que estiver atrás do botão — muitas vezes isso significa uma cor separada em vez de uma variação do acento.
Os estados disabled são onde as paletas falham em acessibilidade sem alarde. Esmaecer um controle é um sinal legítimo; um rótulo que ninguém consegue ler é um bug que passou na revisão porque todo mundo já sabia o que o botão dizia.
Confira o contraste antes de se apegar
Regras de harmonia sabem sobre tom e nada sobre legibilidade. Duas cores podem ser um par complementar de manual e ainda assim serem ilegíveis como texto uma sobre a outra.
Os limites são curtos o bastante para memorizar: 4.5:1 para texto de corpo, 3:1 para texto grande e para componentes de interface como bordas e indicadores de focus. Passe cada par de texto e fundo que você pretende usar por um verificador de contraste antes de a paleta endurecer, não depois que os componentes já estiverem prontos.
O par que falha com mais frequência é um acento de tom médio com texto branco em cima. Pegue um azul médio, #3B82F6: contra branco ele mede 3.7:1, o que passa para um título de 24 px e reprova para um rótulo de 14 px. A luminosidade HSL dele é de cerca de 60% — baixe para 50% e você tem #0B64F4 a 5.1:1, que passa nos dois. Os verdes são piores, porque o seu olho lê verde como muito mais claro do que azul: um #22C55E saturado com branco em cima dá apenas 2.3:1. Dez pontos de luminosidade levam isso a 3.6:1, ainda reprovado; ele precisa de uns quinze. Se você quer o detalhe do que conta como texto grande e de onde a própria razão engana, os limites da razão de contraste explicados cobre isso direito.
Por que uma amostra sempre parece clara demais
Geradores de harmonia trabalham em HSL, e a luminosidade do HSL é aritmética, não percepção. Amarelo a 50% de luminosidade parece muito mais claro — a ponto de ofuscar — do que azul a 50% de luminosidade, porque a visão humana pesa o verde muito mais do que o azul. Em qualquer paleta que inclua um amarelo ou um ciano, aquela amostra vai parecer que está brilhando ao lado das outras mesmo que os números digam que elas combinam.
Não existe truque aqui. Ajuste na mão, ou trabalhe em um espaço de cor perceptual — a diferença entre HEX, RGB e HSL entra no motivo de a luminosidade do HSL se comportar assim e no que o OKLCH faz a respeito.
Três verificações antes de fechar
- Passe para escala de cinza. Tire um screenshot do seu mockup e dessature. Se o botão não se destaca mais, ele nunca esteve se destacando por contraste: estava apoiado no tom, e o tom é a primeira coisa que some.
- Assuma que alguém não enxerga a diferença. A deficiência de visão de cores vermelho-verde é comum: cerca de um homem em doze e uma mulher em duzentas de ascendência norte-europeia, e menos, mas longe de ser rara, em outras populações. Duas amostras a 120° de distância na roda ainda podem ser indistinguíveis para essas pessoas.
- Nunca deixe a cor carregar o significado sozinha. Um estado de erro é vermelho e tem um ícone, ou vermelho e diz o que deu errado. Vermelho sozinho é decoração que parte dos seus usuários vai perder.
Nenhuma dessas coisas leva um minuto, e cada uma pega uma classe de problema que sai cara de consertar depois que os componentes existem.
O caminho mais rápido pela primeira metade disso é colocar a sua cor base no gerador de paletas de cores, percorrer as regras de harmonia até duas delas parecerem plausíveis e copiar os hex como custom properties de CSS — e então gastar o resto do seu tempo nos neutros e nos estados que ele deliberadamente não produz.
No momento em que duas dessas cores acabam no mesmo gradiente, um problema novo aparece: o ponto médio muitas vezes fica cinza e barrento por motivos que não têm nada a ver com a sua escolha de tons. Por que os gradientes CSS ficam barrentos no meio explica o que o navegador está fazendo entre os seus dois stops e como impedir isso.
Perguntas frequentes
Como escolho uma paleta de cores para um site?
Comece por uma cor para a qual você tem um motivo: uma cor de marca que já existe, a cor dominante da sua fotografia ou um tom que os seus concorrentes não reivindicaram. Use uma regra de harmonia para derivar dela um acento e depois construa cinco ou seis neutros separadamente, porque os neutros vão cobrir a maior parte da tela. Confira o contraste de cada par de texto sobre fundo antes de se comprometer com qualquer parte disso.
O que é a regra 60-30-10 no design?
É um guia aproximado de proporção: cerca de 60% de uma superfície na cor dominante, 30% em uma secundária e 10% no acento. Os números exatos importam menos do que a ideia por trás deles, que é a de que uma paleta é proporção e não um conjunto de amostras. Uma fileira de fichas de cor do mesmo tamanho esconde a proporção por completo, então faça o mockup de uma tela real antes de decidir.
Quantas cores um site deveria usar?
Dois tons bastam para a maioria das interfaces: um dominante e um acento. O que você realmente precisa em maior quantidade são neutros — cinco ou seis cinzas para fundos, bordas e texto — mais quatro ou cinco variantes de cada tom para os estados hover, ativo, focus e disabled. Acrescentar um terceiro tom depois é muito mais fácil do que remover um que já está em toda parte.
Como escolho cores que combinam bem?
Fixe uma cor e ande um número determinado de graus pela roda de tons: 180 graus para um par complementar, 30 ou 60 graus para vizinhos análogos, 120 graus para uma tríade. Mantenha a mesma saturação em todo o conjunto para que as cores sejam lidas como uma família. Repare que esta é a roda RGB, onde o oposto do azul é o amarelo e não o laranja que quem pinta esperaria.
Como sei se a minha paleta de cores é acessível?
Teste cada par de texto e fundo contra os limites da WCAG: 4.5:1 para texto de corpo e 3:1 para texto grande e componentes de interface como bordas e anéis de focus. Depois dessature um screenshot e verifique se os elementos importantes ainda se destacam, já que a deficiência de visão de cores vermelho-verde afeta cerca de um homem em doze de ascendência norte-europeia. A cor nunca deveria ser a única coisa carregando um significado.
Última atualização 19 de setembro de 2026