Resumindo
- Um gradiente pastel mistura cores claras, de alta luminosidade e saturação suave, como rosa-claro, manteiga, lilás e menta.
- Texto branco quase nunca funciona sobre gradientes pastel; uma tinta escura em um matiz vizinho e profundo é muito mais fácil de ler.
- Gradientes pastel ficam açucarados quando todas as cores são igualmente doces e saturadas, e ganham frescor quando uma delas é mais empoeirada, mais profunda ou inesperada.
- Uma base de papel off-white sob a cor pastel faz o resultado parecer impresso e calmo, e não digital.
- O OKLCH facilita criar pastéis uniformes: mantenha a luminosidade e o croma fixos e mude apenas o matiz.
Nesta página
Um gradiente pastel é uma mistura de cores claras e suavemente tingidas: rosa-claro com manteiga, lilás com azul-céu, menta com creme. Os pastéis têm alta luminosidade e pouca saturação, e por isso parecem delicados, frescos e simpáticos. O problema é que também é fácil deixá-los doces demais, e quase impossível ler texto branco sobre eles. As duas coisas se resolvem com uma tinta escura, uma base de papel e uma cor um pouco menos óbvia que as outras.
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 simples para criar gradientes pastel uniformes: fixe a luminosidade e o croma e mude apenas o matiz. Assim, todas as cores têm o mesmo peso visual e nenhuma grita.
Frescor ou açúcar: a diferença
Os pastéis ficam açucarados quando tudo é igualmente doce: rosa, azul-bebê e lilás na mesma saturação, texto branco, tudo arredondado. Eles ganham frescor quando algo no design faz contraponto. Pode ser uma cor mais empoeirada e acinzentada, uma tinta profunda para as palavras, uma base de papel off-white ou uma fonte nítida e séria.
Açucarado
- Rosa, azul-bebê e lilás com a mesma força
- Texto branco sobre fundo claro
- Base branca pura, perfeitamente lisa
- Todos os elementos arredondados e fofos
Com frescor
- Uma cor empoeirada ou inesperada, como sálvia ou damasco
- Uma tinta profunda de um matiz vizinho
- Uma base de papel off-white com grão leve
- Uma serifada confiante ou uma sem serifa compacta para as palavras
Combine pastéis com uma tinta escura
Texto branco sobre pastel quase sempre falha no contraste, porque os dois são muito claros. A solução é uma tinta escura: uma versão profunda de um dos matizes do próprio gradiente, como índigo sobre lilás ou bordô sobre rosa-claro. Ela mantém a paleta na mesma família e é confortável de ler. Aqui estão razões medidas para tintas comuns sobre bases pastel. Para as regras por trás delas, veja contraste de cores e acessibilidade.
| Cor do texto | Sobre rosa-claro `#fbcfe8` | Sobre lilás `#c4b5fd` |
|---|---|---|
#ffffff branco | 1,4:1, reprova | 1,9:1, reprova |
#6b7280 cinza médio | 3,5:1, só texto grande | 2,6:1, reprova |
#9d174d bordô | 5,7:1, passa em AA | 4,3:1, só texto grande |
#312e81 índigo | 8,3:1, passa em AAA | 6,2:1, passa em AA |
#1f2937 tinta | 10,6:1, passa em AAA | 8,0:1, passa em AAA |
Use uma base de papel
Pastéis sobre branco puro podem parecer desbotados, e nas telas o branco puro é a coisa mais brilhante que existe. Uma base off-white quente, como #f8f1ea, faz as cores pastel parecerem intencionais, como aquarela ou tinta de risografia no papel. Deixe o pastel florescer a partir de um canto e se dissolver no papel, em vez de preencher a superfície inteira.
Um grão leve reforça ainda mais a sensação de papel. Mantenha-o bem sutil nos pastéis, porque o ruído aparece fácil em cores claras; gradientes granulados traz valores para começar.
Um gradiente pastel em CSS
No CSS, a base de papel, a mancha de cor e a tinta se juntam em poucas linhas. Misturar pastéis em OKLCH evita que o meio fique com aspecto de giz quando os matizes estão distantes, e uma dica 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 */
}Mantenha os pares pastel próximos em matiz para um resultado mais limpo, como em gradientes de duas cores. Quando quiser juntar pastéis distantes, passe por um lilás claro ou um manteiga, para que o meio continue tingido em vez de virar um cinza esbranquiçado.
Onde os gradientes pastel funcionam
- Beleza, skincare, bem-estar e perfumaria
- Bebês, casamentos, papelaria e presentes
- Campanhas de primavera e Páscoa, padarias e cafés
- Telas de boas-vindas e páginas de ajuda tranquilas em software
- Estéticas suaves e oníricas, principalmente com brilho holográfico; veja gradientes holográficos
Um campo pastel com tinta escura passa calma e confiança no tamanho do feed.
O mesmo visual como story, com a cor florescendo a partir do topo.
Se você gosta da suavidade, mas quer mais contraste, dê um passo em direção aos fundos aesthetic com um destaque mais profundo. Você também pode buscar no Mercado palavras como “lilás suave” ou “pêssego claro” para encontrar Marks pastel e começar a criar com eles na hora.
Perguntas frequentes
O que é um gradiente pastel?
Um gradiente pastel é uma mistura de cores claras e de saturação suave, como rosa-claro, lilás, manteiga e menta.
Que cor de texto usar sobre um gradiente pastel?
Uma tinta escura, de preferência uma versão profunda de um dos matizes do gradiente, como índigo ou bordô. Texto branco costuma falhar no contraste sobre pastéis.
Como deixar as cores de um gradiente pastel uniformes?
Crie as cores em OKLCH com a mesma luminosidade e o mesmo croma, mudando apenas o matiz, para que todas tenham o mesmo peso.
Como evitar que um gradiente pastel fique doce demais?
Adicione uma cor empoeirada ou inesperada, use tinta escura no texto, aplique sobre uma base de papel off-white e combine com uma tipografia confiante.
Que cor de fundo combina com pastéis?
Um off-white quente como #f8f1ea faz os pastéis parecerem impressos e calmos; o branco puro pode deixá-los desbotados.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
