A primeira paleta a sério que alguma vez pus em produção tinha exatamente cinco cores, e quatro delas eram o mesmo azul. Não planeei que fosse assim — apenas fui precisando de "uma versão um pouco mais clara desta para o fundo do cartão" e "uma mais escura para o contorno" e "algo esbatido para o botão desativado". O que estava na verdade a fazer, sem ter vocabulário para isso, era a criar tintas, sombras e tons. Assim que aprendi que estas três palavras descrevem três operações precisas, o trabalho com paletas deixou de ser tentativa e erro e passou a ser algo mais próximo da aritmética.
Este guia é sobre essa aritmética. O que são realmente as tintas, sombras e tons, porque é que o valor e a saturação são dois botões diferentes e não um só, e como transformar uma só matiz numa escala tonal limpa sobre a qual consiga mesmo construir uma interface. Tudo aqui mapeia diretamente para os controlos HSL em o gerador de paletas de cores, por isso pode acompanhar com números reais em vez de intuições.
As definições numa frase, e depois a nuance
Aqui ficam as definições, despidas ao essencial:
- Uma tinta é uma matiz mais branco. Fica mais clara e mais gentil. O vermelho torna-se rosa.
- Uma sombra é uma matiz mais preto. Fica mais escura e mais profunda. O vermelho torna-se grená.
- Um tom é uma matiz mais cinzento. Fica esbatido e mais poeirento sem necessariamente ficar muito mais claro ou mais escuro. O vermelho torna-se um tijolo ou um rosa.
Esta é a diferença entre tinta, sombra e tom numa só inspiração, e a maioria dos artigos fica-se por aqui. Mas a parte interessante é o que as três têm em comum: cada uma delas reduz o croma — a colorido pura da matiz. Uma matiz totalmente saturada está no ponto mais intenso a que alguma vez chegará. No momento em que se mistura qualquer neutro (branco, preto ou cinzento), retira-se-lhe intensidade. Isto está bem documentado na referência padrão sobre tinta, sombra e tom: adicionar branco, preto ou cinzento baixa todo o croma da cor, ainda que desloquem a luminosidade em direções diferentes.
Por isso, o modelo mental não é "tinta = mais claro, sombra = mais escuro, tom = esbatido" como três efeitos não relacionados. É um só efeito — diluir uma matiz pura com um neutro — visto de três direções. É esse reenquadramento que faz a próxima ideia encaixar.
Valor e saturação são dois botões diferentes
A coisa mais útil que pode interiorizar é que a luminosidade e a saturação são independentes. Os principiantes tratam "torná-la mais clara" e "torná-la menos intensa" como o mesmo gesto, e é por isso que as suas paletas ficam gredosas e planas. Não são o mesmo gesto. São dois botões separados, e as tintas, sombras e tons são apenas combinações diferentes da forma como os roda.
É exatamente por isto que o HSL é o modelo de cor que vale a pena aprender. HSL significa matiz (hue), saturação (saturation) e luminosidade (lightness), e divide a cor em três números que pode ajustar um de cada vez:
- A matiz é o ângulo na roda de cores,
0–360°. O vermelho ronda os0, o verde fica perto de120, o azul perto de240. As tintas, sombras e tons geralmente deixam a matiz em paz — não está a mudar que cor é, apenas quão pura e quão clara ela é. - A saturação é
0–100%. A100%a cor está em plena intensidade; a0%é um cinzento puro sem matiz nenhuma. Este é o seu botão de croma. - A luminosidade é
0–100%. A0%obtém preto seja qual for a matiz, a100%obtém branco seja qual for a matiz, e50%é mais ou menos onde vive a versão pura e vívida da cor.
Com esse vocabulário, as três operações tornam-se precisas. Uma tinta é sobretudo subir a luminosidade em direção a 100%. Uma sombra é sobretudo baixar a luminosidade em direção a 0%. Um tom é sobretudo baixar a saturação em direção a 0% mantendo a luminosidade mais ou menos onde está. A referência da MDN sobre a notação HSL é um bom sítio para confirmar a sintaxe, caso queira escrever isto como CSS.
Uma nota de rodapé precisa, porque faz tropeçar muita gente. O "L" do HSL é luminosidade (lightness), não "valor" nem "brilho". Há um modelo irmão, HSB/HSV, em que o terceiro canal é o valor, e comporta-se de forma diferente — no HSB, 100% de valor com saturação plena dá-lhe a cor pura vívida, enquanto no HSL 100% de luminosidade dá sempre branco. Se alguma vez tirou uma cor do Photoshop (que usa HSB) e ela parecia errada no CSS (que usa HSL), é desse desencontro que se trata. Para construir escalas tonais, o HSL é o modelo mais amigável precisamente porque a luminosidade corre limpamente do preto ao branco.
Como clarear ou escurecer uma cor sem a estragar
Agora a parte prática, porque há uma forma certa e uma forma errada de fazer isto.
A forma ingénua de clarear uma cor é arrastar a luminosidade para cima e dar por terminado. O problema é que, à medida que uma cor se aproxima do branco, manter a saturação constante fá-la parecer fina e desbotada — uma versão pálida e anémica de si mesma. A solução a que os designers experientes recorrem quase por reflexo: à medida que sobe a luminosidade, suba também a saturação um pouco, e por vezes desloque a matiz uns graus. As tintas claras parecem muitas vezes mais ricas com um pouco mais de saturação do que o tom médio, não menos.
O escurecimento tem a armadilha em espelho. Baixe a luminosidade em direção a 0 deixando a saturação intacta e as cores escuras ficam turvas e mortas — um quase-preto plano e sem vida. As boas sombras escuras costumam querer a saturação aumentada à medida que escurecem, e frequentemente um pequeno desvio de matiz em direção ao azul ou ao vermelho para se manterem com ar intencional em vez de parecerem que alguém apenas desligou as luzes. Esta é a maior razão para as escalas construídas à mão parecerem mais vivas do que as geradas por interpolação ingénua até ao preto.
Por isso, a resposta honesta a como clarear ou escurecer uma cor é: mova a luminosidade como ação principal, mas não congele os outros dois canais. A leitura HSL da ferramenta facilita esta sensação — mude um número, observe a amostra, e rapidamente vai aprender de quanta saturação uma dada matiz precisa em cada extremo da escala.
Construir uma escala monocromática limpa a partir de uma só matiz
É aqui que tudo se torna útil. Uma escala de cor monocromática é uma só matiz expandida numa escada completa de tintas, sombras e tons — e é a espinha dorsal de praticamente toda a interface real. Quando escolhe a regra monocromática em o gerador de paletas de cores, é esta a estrutura que ele está a gerar: uma matiz, muitos passos de luminosidade.
Deixe-me construir uma à mão para que veja a lógica. Comece com um azul base na matiz 217, saturação razoavelmente cheia, luminosidade média — chame-lhe #2563EB. Agora gere uma rampa percorrendo a luminosidade do muito claro ao muito escuro, mantendo a matiz perto de 217 e subindo a saturação nas duas pontas:
#EFF4FE— a tinta mais clara. Um branco-azulado quase impercetível. Fundo de página ou de secção.#DBE6FD— uma tinta suave para preenchimentos subtis e listras alternadas.#B9CDFB— uma tinta clara para contornos e divisórias.#7DA2F6— um passo médio-claro, bom para auréolas de hover e preenchimentos secundários.#2563EB— a base. A sua cor de marca principal, aquela de que os botões são feitos.#1D4FC4— um passo abaixo. O estado natural de hover para aquele botão principal.#163C96— uma sombra mais profunda para estados ativo/premido e contornos fortes.#0F2A6B— uma sombra escura para títulos sobre fundos claros, ou superfícies em modo escuro.#0A1C45— a sombra mais escura. Quase preto, ainda inconfundivelmente azul.
Repare no que essa escada lhe traz. Todos os estados interativos de que um botão precisa — repouso, hover, ativo — saem da mesma matiz, com três passos de luminosidade de distância. Não está a inventar cores novas; está a descer uma escala. É por isso que estas são codificadas como tokens numerados (blue-50 a blue-900) nos sistemas de design. Se quiser aprofundar a transformação de uma rampa destas em variáveis reutilizáveis, criar tokens de cor escaláveis pega exatamente onde isto termina.
Algumas regras conquistadas a pulso para a própria escala:
- Espalhe os seus passos de luminosidade o suficiente para se distinguirem. A falha monocromática mais comum são passos demasiado próximos —
#2563EBao lado de#2C68ECsão, na prática, a mesma cor, e a sua interface perde hierarquia. Os passos adjacentes devem ser visivelmente diferentes num relance. - Os passos não têm de ser igualmente espaçados. O olho humano é mais sensível às diferenças entre cores claras, por isso o extremo claro da rampa costuma querer incrementos de luminosidade mais apertados e o extremo escuro aguenta saltos maiores. Um espaçamento uniforme na luminosidade parece muitas vezes irregular ao olho.
- Mantenha uma matiz consistente, mas permita pequenas derivas. Um grau ou dois de desvio de matiz entre passos é aceitável e muitas vezes fica melhor; uma oscilação de vinte graus significa que saiu do território monocromático.
Onde os tons ganham o seu lugar numa interface
As tintas e as sombras fazem o trabalho pesado numa rampa de interface, mas os tons — as versões esbatidas, misturadas com cinzento — resolvem um problema específico que as tintas e sombras puras não conseguem: estados que devem recuar.
O caso óbvio são os controlos desativados. Um botão desativado não deve ser um azul mais claro (isso lê-se como um estado ativo diferente) — deve ser um azul atenuado, dessaturado em direção ao cinzento para sinalizar claramente "não disponível de momento". Pegue no seu #2563EB e puxe a saturação bem para baixo em direção ao cinzento mantendo a luminosidade moderada, e obtém algo como #9AA6BF: ainda ligeiramente azul, obviamente inerte. É um tom a fazer exatamente o que as tintas e sombras não conseguem.
Os tons são também a forma de construir superfícies sofisticadas e discretas. Um neutro de cinzento puro pode parecer frio e desligado da sua marca. Um neutro tonalizado — cinzento com uns pontos percentuais da sua matiz de marca misturados — faz com que fundos e contornos pareçam pertencer à mesma família que a sua cor de acento. É este o truque por trás de muitas paletas que parecem caras: os "cinzentos" não são cinzentos de todo, são versões fortemente tonalizadas da matiz principal. É também central nas boas paletas de cores de modo escuro, onde as superfícies de preto puro e plano parecem duras e as superfícies escuras ligeiramente tonalizadas se leem como intencionais.
Os erros em que ainda me apanho
- Confundir uma tinta com um tom. Não são intermutáveis. Uma tinta de vermelho é rosa (mais claro, ainda bastante puro). Um tom de vermelho é um rosa-velho poeirento (esbatido, luminosidade semelhante). Recorra a uma tinta quando quer mais claro; recorra a um tom quando quer mais discreto. Escolher o errado é por que uma cor "suavizada" às vezes continua a parecer berrante.
- Construir a escala toda numa única saturação. Congele a saturação ao longo da rampa e o extremo claro fica pálido e o extremo escuro fica enlameado. Deixe a saturação respirar — para cima nos extremos, muitas vezes mais calma no meio.
- Esquecer que o contraste existe. Uma rampa monocromática lindíssima não lhe diz nada sobre se o texto em cima dela é legível. Passos de luminosidade com três de distância podem ainda falhar os rácios de contraste da WCAG para texto de corpo. Construa a escala para a coesão e depois verifique em separado os pares reais de texto-sobre-superfície com um verificador de contraste. Coesão e legibilidade são problemas separados, e a ferramenta verifica o segundo por si.
- Tratar o monocromático como a linha de chegada. As tintas e sombras de uma só matiz dão-lhe um sistema calmo e unificado — mas às vezes precisa de um acento de outro ponto da roda. Uma base monocromática mais um único acento complementar é uma das paletas mais fiáveis que existem, e é aí que compreender a harmonia de cor compensa.
No fim, tudo se resume a isto: uma matiz é apenas um ponto de partida. As tintas, sombras e tons são as três formas de esticar esse único ponto de partida numa paleta de trabalho completa — mais clara com branco, mais escura com preto, mais discreta com cinzento — e o HSL dá-lhe os botões para o fazer deliberadamente em vez de por acaso. Escolha uma matiz de que goste, abra a regra monocromática e percorra o controlo de luminosidade de uma ponta à outra. Quando tiver construído à mão uma boa rampa de nove passos, nunca mais vai olhar para um "conjunto de cores" da mesma maneira. É quase sempre uma só cor, vestida com nove roupas diferentes.
Perguntas Frequentes
Qual é a diferença entre uma tinta, uma sombra e um tom?
Uma tinta é uma matiz com branco adicionado, ficando mais clara e suave (o vermelho torna-se rosa). Uma sombra é uma matiz com preto adicionado, ficando mais escura e profunda (o vermelho torna-se grená). Um tom é uma matiz com cinzento adicionado, ficando esbatida e mais poeirenta sem necessariamente mudar muito a luminosidade (o vermelho torna-se um rosa-velho). As três reduzem a colorido pura, ou croma, da matiz original — apenas deslocam a luminosidade em direções diferentes.
O que é exatamente uma tinta na cor?
Uma tinta é o que se obtém ao misturar uma matiz pura com branco. Aumenta a luminosidade da cor e baixa suavemente a sua intensidade, produzindo uma versão mais clara e gentil do original — o rosa é uma tinta de vermelho, o azul-céu é uma tinta de azul. Em termos de HSL, fazer uma tinta significa sobretudo aumentar o valor de luminosidade em direção a 100%, muitas vezes com um pequeno acréscimo de saturação para que a cor clara não pareça desbotada.
Como clareio ou escureço uma cor sem que pareça desbotada ou enlameada?
Use a luminosidade como botão principal, mas não congele a saturação. Ao clarear, suba a luminosidade e empurre a saturação um pouco para cima, para que a tinta se mantenha rica em vez de pálida e fina. Ao escurecer, baixe a luminosidade mas aumente ligeiramente a saturação (e às vezes desloque a matiz uns graus em direção ao azul ou ao vermelho) para que a sombra se mantenha viva em vez de turva. Congelar a saturação ao longo de todo o intervalo é a razão mais comum para as escalas parecerem planas.
Qual é a diferença entre valor e saturação?
São dois botões independentes. O valor (luminosidade no HSL) controla quão clara ou escura é uma cor, indo do preto a 0% ao branco a 100%. A saturação controla quão intensa ou pura é a cor, indo de uma matiz vívida e em plena força a 100% até um cinzento neutro a 0%. Pode mudar um sem mudar o outro — uma cor pode ser escura e vívida, ou escura e esbatida. Tratá-los como o mesmo gesto é o que causa paletas gredosas e sem vida.
Como construo uma escala de cor monocromática para uma interface?
Comece com uma matiz base e percorra a sua luminosidade do muito claro ao muito escuro em passos distintos, mantendo a matiz mais ou menos constante e subindo ligeiramente a saturação nos extremos claro e escuro. Procure cerca de nove passos, para ter tintas claras para fundos e contornos, a sua cor base no meio para os elementos principais, e sombras escuras para hover, ativo e texto. Mantenha os passos adjacentes visivelmente diferentes, use incrementos mais apertados no extremo claro e verifique o contraste do texto em separado. A regra monocromática no gerador de paletas de cores produz esta estrutura automaticamente.
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