# Gradientes pastel que ficam frescos, não açucarados [Canonical HTML page](https://gradiently.design/pt-pt/guide/pastel-gradients) Os pastéis são os gradientes mais fáceis de gostar e os mais fáceis de exagerar. Algumas regras mantêm-nos a parecer luz de primavera sobre papel e não um bolo de aniversário. ## The short version - Um gradiente pastel mistura cores pálidas com luminosidade alta e saturação suave, como rosa-pálido, manteiga, lilás e menta. - O texto branco quase nunca funciona em gradientes pastel; uma tinta escura num matiz vizinho profundo é muito mais fácil de ler. - Os gradientes pastel parecem açucarados quando todas as cores são igualmente doces e saturadas, e frescos quando uma cor é mais empoeirada, mais profunda ou inesperada. - Um fundo de papel esbranquiçado por baixo da cor pastel fá-la parecer impressa e calma em vez de digital. - O OKLCH torna fácil fazer pastéis uniformes: mantém a luminosidade e o croma fixos e muda apenas o matiz. 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. - Espectro pastel em OKLCH: `linear-gradient(90deg in oklch, oklch(0.9 0.07 20), oklch(0.9 0.07 140), oklch(0.9 0.07 260))` - Rosa-pálido e manteiga: `linear-gradient(135deg, #fecdd3 0%, #fef3c7 100%)` - Glicínia: `linear-gradient(135deg, #e9d5ff 0%, #bfdbfe 100%)` - Creme de pistácio: `linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%)` - Céu e menta: `linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%)` - Névoa pervinca: `linear-gradient(135deg, #e0e7ff 0%, #fbcfe8 100%)` - Rosa-velho e salva: `linear-gradient(135deg, #f3d9d5 0%, #d5e3d0 100%)` - Espuma do mar: `linear-gradient(135deg, #ccfbf1 0%, #a5f3fc 100%)` - Alperce rosado: `linear-gradient(135deg, #ffedd5 0%, #fecaca 100%)` Pares pastel com códigos para copiar. O primeiro é construído em OKLCH com luminosidade e croma fixos, por isso os seus três matizes parecem igualmente suaves. ## 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. ### Açucarado - Rosa, azul-bebé e lilás com a mesma força - Texto branco sobre um fundo pálido - Fundo branco puro, perfeitamente liso - Todos os elementos redondos e fofos ### Fresco - Uma cor empoeirada ou inesperada, como salva ou alperce - Uma tinta profunda de um matiz vizinho - Um fundo de papel esbranquiçado com grão leve - Uma serifada confiante ou uma sem serifa apertada para as palavras ## 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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility). | Cor do texto | Sobre rosa-pálido `#fbcfe8` | Sobre lilás `#c4b5fd` | | --- | --- | --- | | `#ffffff` branco | 1,4:1, falha | 1,9:1, falha | | `#6b7280` cinzento médio | 3,5:1, só texto grande | 2,6:1, falha | | `#9d174d` bordeaux | 5,7:1, passa AA | 4,3:1, só texto grande | | `#312e81` índigo | 8,3:1, passa AAA | 6,2:1, passa AA | | `#1f2937` tinta | 10,6:1, passa AAA | 8,0:1, passa AAA | Proporções de contraste segundo as WCAG 2. O texto corrido precisa de pelo menos 4,5:1 e o texto grande de pelo menos 3:1. Quanto mais profundo o pastel, mais escura tem de ser a tinta. - Papel: #f8f1ea - Rosa-pálido: #fbcfe8 - Lilás: #e9d5ff - Salva: #d5e3d0 - Manteiga: #fde68a - Tinta índigo: #312e81 Um sistema pastel completo: um fundo de papel, três pastéis, um acento quente e uma tinta escura para todas as palavras. ## 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. - Rosa-pálido a florir no papel: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f8f1ea 55%)` - Salva a florir no papel: `radial-gradient(circle at 85% 80%, #d5e3d0 0%, #f8f1ea 60%)` - Lilás vindo de cima: `radial-gradient(ellipse at 50% 0%, #e9d5ff 0%, #f8f1ea 65%)` Pastéis a florir sobre um fundo de papel. A maior parte da superfície continua a ser papel, e é isso que os mantém calmos. 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](https://gradiently.design/pt-pt/guide/grainy-gradients) 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. ```css .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 */ } ``` Rosa-pálido e salva a florir sobre uma aguada de papel a lilás, com tinta índigo para as palavras. Mantém os pares pastel próximos no matiz para um resultado mais limpo, como em [gradientes de duas cores](https://gradiently.design/pt-pt/guide/two-color-gradients). 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](https://gradiently.design/pt-pt/guide/holographic-gradients) Uma publicação vertical de saldos intitulada Seleção de primavera sobre um gradiente pastel suave com letras escuras Um campo pastel com uma tinta escura lê-se calmo e confiante no tamanho do feed. Uma versão em story vertical do mesmo design pastel de saldos O mesmo visual como story, com a cor a florir a partir de cima. Se gostas da suavidade mas queres mais contraste, dá um passo em direção aos [fundos estéticos](https://gradiently.design/pt-pt/guide/aesthetic-backgrounds) 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. ## FAQ ### O que é um gradiente pastel? Um gradiente pastel é uma mistura de cores pálidas e suavemente saturadas, como rosa-pálido, lilás, manteiga e menta. ### Que cor de texto combina com um gradiente pastel? Uma tinta escura, de preferência uma versão profunda de um dos matizes do gradiente, como índigo ou bordeaux. O texto branco costuma falhar o contraste sobre pastéis. ### Como faço as cores de um gradiente pastel parecerem uniformes? Constrói-as em OKLCH com a mesma luminosidade e o mesmo croma, mudando apenas o matiz, para que todas as cores tenham o mesmo peso. ### Como evito que um gradiente pastel pareça doce demais? Acrescenta uma cor empoeirada ou inesperada, usa uma tinta escura para o texto, põe-no sobre um fundo de papel esbranquiçado e junta-lhe uma tipografia confiante. ### Que cor de fundo combina com pastéis? Um esbranquiçado quente como `#f8f1ea` faz os pastéis parecerem impressos e calmos; o branco puro pode fazê-los parecer desbotados.