Paletas de cores suaves: tons empoeirados para marcas calmas

Uma paleta de cores suaves é um conjunto de cores com a saturação reduzida, de modo que parecem empoeiradas, delicadas e levemente acinzentadas, e não puras. Sálvia #9CAF88, rosa envelhecido #C9A9A6, azul-ardósia #6B7F99, malva #B48A9B e argila #B5826B são típicas. Combinam com marcas que querem parecer calmas e ponderadas: cerâmica, bem-estar, papelaria, arquitetura, moda lenta. O porém é que as cores suaves tendem à mesma luminosidade, então toda boa paleta suave inclui um escuro firme para sustentá-la.

O que torna uma cor suave

Uma cor tem três ajustes: matiz, saturação e luminosidade (veja matiz, saturação e brilho). Suavizar reduz a saturação mantendo o matiz reconhecível. Há dois jeitos clássicos de fazer isso: misturar cinza, o que os designers chamam de criar um tom, ou misturar um pouco da cor complementar, o que os pintores sempre fizeram. Os dois puxam a cor para o neutro.

Suave não é o mesmo que pastel. O pastel acrescenta branco, então continua limpo e claro; uma cor suave acrescenta cinza, então pode ser clara, média ou escura e sempre parece um pouco empoeirada. Paletas de cores pastel e tons claros, médios e escuros traçam essa linha com mais detalhes.

Sete paletas de cores suaves com códigos hex

• Porto: névoa #E6E9EA, azul-ardósia #6B7F99, cinza-mar #93A3A6, corda #C2AD8E, azul-marinho profundo #22303C.
• Cerâmica: biscoito #F1E8DD, argila #B5826B, esmalte cinza #A7A39A, ferro #5B4A42, preto de forno #231D1A.
• Pó de lavanda: bruma #F1EBE6, malva #B48A9B, urze #8E8AA6, sálvia #9CAF88, berinjela #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, pinheiro #24302E.
• Crepúsculo empoeirado: pergaminho #EFE6DA, pó de pêssego #D9A88F, marrom-rosa #A06F6B, cinza-ameixa #6E5866, noite #2A2329.

Todas terminam num escuro. Isso não é decoração. Sem ele, não há onde colocar o texto nem como desenhar um contorno, e a paleta parece uma fotografia deixada no sol.

Por que paletas suaves viram neblina

Suavizar elimina as diferenças mais fortes entre as cores, então a luminosidade passa a ser a única coisa que as separa. Sálvia #9CAF88 e rosa envelhecido #C9A9A6 parecem um belo contraste de verde e rosa, mas a razão de contraste é 1,09:1: quase a mesma luminosidade. O texto de um sobre o outro é ilegível. Até a sálvia sobre branco puro só chega a 2,36:1.

Confira os seus próprios pares com as orientações de contraste de cores. Um bom hábito é converter a paleta para escala de cinza por um instante: se duas cores viram o mesmo cinza, nunca ponha uma sobre a outra.

Como suavizar qualquer cor em CSS

Se você já tem uma cor de marca viva e quer uma companheira mais calma, misture-a com cinza em vez de escolher uma cor nova a olho. O color-mix() no espaço oklch mantém o matiz estável enquanto a saturação cai, e é compatível com 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);
}

OKLCH explicado trata de por que esse espaço se comporta de modo mais uniforme que o HSL, e saturação no design trata de quando aumentá-la de novo.

Degradês e fundos suaves

Cores suaves fazem degradês delicados e silenciosos, sobretudo quando as paradas são próximas no matiz e a luz vem de um lado. Acrescente um pouco de grão: misturas de baixo contraste formam faixas com facilidade, e a textura as faz parecer uma superfície, e não um ajuste de tela.

Um esquema suave também pode receber uma cor um pouco mais forte como destaque, como uma terracota entre sálvias ou um azul-petróleo mais profundo entre cinzas. Limite-a a um elemento por design: um preço, um botão, uma data. Ela dá ao olho um lugar para pousar sem quebrar a calma e é assim que costumam funcionar as paletas de tons terrosos de onde os esquemas suaves tomam emprestado.

Se a sua marca vive em cores suaves, um fundo com grão e luz próprios faz boa parte do trabalho. Um Mark da Gradiently dá a você uma superfície suave e distintiva que mantém o texto legível sozinha, o que importa mais num esquema suave do que em qualquer outro.