# Gradientes pastel com frescor, sem ficar enjoativos [Canonical HTML page](https://gradiently.design/pt-br/guide/pastel-gradients) Os pastéis são os gradientes mais fáceis de gostar e os mais fáceis de exagerar. Algumas regras fazem com que pareçam luz de primavera no papel, e não um bolo de aniversário. ## The short version - 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. 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. - 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-claro e manteiga: `linear-gradient(135deg, #fecdd3 0%, #fef3c7 100%)` - Glicínia: `linear-gradient(135deg, #e9d5ff 0%, #bfdbfe 100%)` - Creme de pistache: `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 antigo e sálvia: `linear-gradient(135deg, #f3d9d5 0%, #d5e3d0 100%)` - Espuma do mar: `linear-gradient(135deg, #ccfbf1 0%, #a5f3fc 100%)` - Damasco rosado: `linear-gradient(135deg, #ffedd5 0%, #fecaca 100%)` Pares pastel com códigos para copiar. O primeiro é feito em OKLCH com luminosidade e croma fixos, então seus três matizes parecem igualmente suaves. ## 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](https://gradiently.design/pt-br/guide/color-contrast-accessibility). | 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 | Razões de contraste segundo a WCAG 2. Texto comum precisa de pelo menos 4,5:1, e texto grande, de pelo menos 3:1. Quanto mais profundo o pastel, mais escura a tinta precisa ser. - Papel: #f8f1ea - Rosa-claro: #fbcfe8 - Lilás: #e9d5ff - Sálvia: #d5e3d0 - Manteiga: #fde68a - Tinta índigo: #312e81 Um sistema pastel completo: uma base de papel, três pastéis, um destaque quente e uma tinta escura para todas as palavras. ## 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. - Rosa-claro florescendo no papel: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f8f1ea 55%)` - Sálvia florescendo 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%)` Manchas pastel sobre uma base de papel. A maior parte da superfície continua sendo papel, e é isso que as mantém calmas. 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](https://gradiently.design/pt-br/guide/grainy-gradients) 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. ```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 */ } ``` Manchas de rosa-claro e sálvia sobre uma aguada de papel a lilás, com tinta índigo para as palavras. Mantenha os pares pastel próximos em matiz para um resultado mais limpo, como em [gradientes de duas cores](https://gradiently.design/pt-br/guide/two-color-gradients). 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](https://gradiently.design/pt-br/guide/holographic-gradients) Um post vertical de promoção com o título Seleção de primavera sobre um gradiente pastel suave com letras escuras Um campo pastel com tinta escura passa calma e confiança no tamanho do feed. Uma versão vertical em story do mesmo design pastel de promoção 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](https://gradiently.design/pt-br/guide/aesthetic-backgrounds) 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. ## FAQ ### 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.