Paletas de cores suaves: tons empoeirados para marcas calmas

Uma paleta de cores suaves é um conjunto de cores com a saturação reduzida, para que pareçam empoeiradas, macias e ligeiramente acinzentadas em vez de puras. Salva #9CAF88, rosa antigo #C9A9A6, azul-ardósia #6B7F99, malva #B48A9B e barro #B5826B são típicas. Assentam a marcas que querem parecer calmas e ponderadas: cerâmica, bem-estar, papelaria, arquitetura, moda lenta. O senão é que as cores suaves tendem para a mesma luminosidade, por isso toda a boa paleta suave inclui um escuro firme que a segure.

O que torna uma cor suave

Uma cor tem três definições: tom, saturação e luminosidade (vê tom, saturação e brilho). Suavizar reduz a saturação mantendo o tom reconhecível. Há duas formas clássicas de o fazer: misturar cinzento, a que os designers chamam fazer um tom, ou misturar um pouco da cor complementar, o que os pintores sempre fizeram. Ambas puxam a cor para o neutro.

Suave não é o mesmo que pastel. Um pastel acrescenta branco, por isso fica limpo e claro; uma cor suave acrescenta cinzento, por isso pode ser clara, média ou escura e parece sempre um pouco empoeirada. As paletas de cores pastel e as tintas, tons e sombras traçam a linha com mais pormenor.

Sete paletas de cores suaves com códigos hex

• Porto: nevoeiro #E6E9EA, azul-ardósia #6B7F99, cinzento-mar #93A3A6, corda #C2AD8E, azul-marinho profundo #22303C.
• Cerâmica: biscoito #F1E8DD, barro #B5826B, vidrado de cinza #A7A39A, ferro #5B4A42, preto de forno #231D1A.
• Pó de lavanda: bruma #F1EBE6, malva #B48A9B, urze #8E8AA6, salva #9CAF88, beringela #4A3F4F.
• Olival: creme #F2EDE1, oliva #8A8A5C, erva seca #B1A87F, terracota #A9674E, casca #3A3328.
• Nórdica: neve #F2F3F1, bétula #D8D1C4, líquen #A3AE9D, fiorde #5F7A80, pinho #24302E.
• Crepúsculo empoeirado: pergaminho #EFE6DA, pó de pêssego #D9A88F, castanho-rosa #A06F6B, cinzento-ameixa #6E5866, noite #2A2329.

Todas terminam num escuro. Isso não é decoração. Sem ele, não há nada em que compor o texto nem com que desenhar um contorno, e a paleta parece uma fotografia esquecida ao sol.

Porque é que as paletas suaves viram nevoeiro

Suavizar remove as diferenças mais fortes entre cores, por isso a luminosidade passa a ser a única coisa que as separa. A salva #9CAF88 e o rosa antigo #C9A9A6 parecem um bonito contraste de verde e rosa, mas a sua razão de contraste é 1,09:1: quase a mesma luminosidade. Texto de uma sobre a outra é ilegível. Até a salva sobre branco puro só chega a 2,36:1.

Verifica os teus próprios pares com as orientações do contraste de cor. Um bom hábito é converter a paleta para tons de cinzento por um momento: se duas cores ficarem o mesmo cinzento, nunca ponhas uma sobre a outra.

Como suavizar qualquer cor em CSS

Se já tens uma cor de marca viva e queres uma companheira mais calma, mistura-a com cinzento em vez de escolher uma cor nova a olho. O color-mix() no espaço oklch mantém o tom estável enquanto a saturação desce, e é suportado em todos os principais navegadores atuais.

:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}

O OKLCH explicado trata de porque é que este espaço se comporta de forma mais uniforme do que o HSL, e a saturação no design trata de quando voltar a subi-la.

Gradientes e fundos suaves

As cores suaves fazem gradientes macios e silenciosos, sobretudo quando as paragens têm tons próximos e a luz vem de um lado. Junta um pouco de grão: as transições de baixo contraste fazem banding com facilidade, e a textura faz com que pareçam uma superfície e não uma definição de ecrã.

Um esquema suave também pode ter uma cor um pouco mais forte como acento, como uma terracota entre salvas ou um azul-petróleo mais profundo entre cinzentos. Limita-o a um só elemento por design: um preço, um botão, uma data. Dá ao olho um sítio onde pousar sem quebrar a calma, e é assim que costumam funcionar as paletas de tons terra de onde os esquemas suaves se inspiram.

Se a tua marca vive em cores suaves, um fundo com grão e luz próprios faz muito do trabalho. Um Mark do Gradiently dá-te uma superfície macia e distintiva que mantém o texto legível por si, o que importa mais num esquema suave do que em qualquer outro.