Gradientes pastel que ficam frescos, não açucarados

Um gradiente pastel é uma mistura de cores pálidas e suaves: rosa-pálido a manteiga, lilás a azul-céu, menta a creme. Os pastéis têm luminosidade alta e só um pouco de saturação, e é por isso que parecem suaves, frescos e simpáticos. O problema é que também é fácil torná-los doces demais, e é quase impossível ler texto branco sobre eles. Ambos se resolvem com uma tinta escura, um fundo de papel e uma cor um pouco menos óbvia do que as restantes.

O que torna uma cor pastel

Um pastel é uma cor com muito branco: luminosidade alta, saturação baixa a moderada. No espaço de cor OKLCH, a maioria dos pastéis fica entre 0,88 e 0,95 de luminosidade, com um croma pequeno. Isso dá um truque prático para fazer gradientes pastel que parecem uniformes: fixa a luminosidade e o croma e muda apenas o matiz. Assim todas as cores têm o mesmo peso visual, e nenhuma grita.

Fresco ou açucarado: a diferença

Os pastéis caem no açucarado quando tudo é igualmente doce: rosa, azul-bebé e lilás com a mesma saturação, texto branco, tudo arredondado. Parecem frescos quando algo no design faz contrapeso. Pode ser uma cor mais empoeirada e acinzentada, uma tinta profunda para as palavras, um fundo de papel esbranquiçado ou um tipo de letra nítido e sério.

Junta aos pastéis uma tinta escura

O texto branco sobre um pastel falha quase sempre o contraste, porque ambos são muito claros. A solução é uma tinta escura: uma versão profunda de um dos próprios matizes do gradiente, como índigo sobre lilás ou bordeaux sobre rosa-pálido. Mantém a paleta numa família e lê-se com conforto. Aqui tens proporções medidas para tintas comuns sobre fundos pastel. Para as regras por trás delas, vê contraste de cor e acessibilidade.

Usa um fundo de papel

Os pastéis sobre branco puro podem parecer desbotados e, nos ecrãs, o branco puro é a coisa mais clara que existe. Um fundo esbranquiçado quente, como #f8f1ea, faz as cores pastel parecerem intencionais, como aguarela ou tinta de risografia sobre papel. Deixa o pastel florescer a partir de um canto e desvanecer-se no papel, em vez de encher a superfície inteira.

Um grão leve reforça a sensação de papel. Mantém-no muito subtil nos pastéis, porque o ruído vê-se facilmente em cores claras; gradientes com grão tem quantidades de partida.

Um gradiente pastel em CSS

Em CSS, o fundo de papel, o florescer e a tinta juntam-se em poucas linhas. Misturar pastéis em OKLCH evita que o meio fique calcário quando os matizes estão afastados, e uma indicação de cor deixa o papel ocupar a maior parte da superfície.

.pastel {
  background-color: #f8f1ea; /* paper */
  background-image:
    radial-gradient(circle at 15% 10%, #fbcfe8 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, #d5e3d0 0%, transparent 50%),
    linear-gradient(160deg in oklch, #f8f1ea, 60%, #e9d5ff);
  color: #312e81; /* indigo ink */
}

Mantém os pares pastel próximos no matiz para um resultado mais limpo, como em gradientes de duas cores. Quando quiseres mesmo juntar pastéis afastados, fá-los passar por um lilás-pálido ou por manteiga para que o meio continue com cor em vez de ficar num cinzento esbranquiçado.

Onde os gradientes pastel funcionam

• Beleza, cuidados de pele, bem-estar e perfumaria
• Bebé, casamentos, papelaria e presentes
• Campanhas de primavera e de Páscoa, pastelarias e cafés
• Onboarding de software calmo e páginas de ajuda
• Estéticas suaves e sonhadoras, sobretudo com brilho holográfico; vê gradientes holográficos

Se gostas da suavidade mas queres mais contraste, dá um passo em direção aos fundos estéticos com um acento mais profundo. Também podes pesquisar no Mercado palavras como “lilás suave” ou “pêssego pálido” para encontrar Marks pastel e criar com eles de imediato.