# Degradados pastel que se ven frescos, no empalagosos [Canonical HTML page](https://gradiently.design/es/guide/pastel-gradients) Los pasteles son los degradados que más fácil gustan y los más fáciles de pasar de dulces. Unas pocas reglas hacen que parezcan luz de primavera sobre papel y no una tarta de cumpleaños. ## The short version - Un degradado pastel mezcla colores pálidos de luminosidad alta y saturación suave, como rosa empolvado, mantequilla, lila y menta. - El texto blanco casi nunca funciona sobre degradados pastel; una tinta oscura en un tono vecino profundo se lee mucho mejor. - Los degradados pastel se ven empalagosos cuando todos los colores son igual de dulces y saturados, y frescos cuando uno es más apagado, más profundo o inesperado. - Un fondo de papel blanco roto bajo el color pastel hace que parezca impreso y sereno en lugar de digital. - OKLCH facilita los pasteles uniformes: fija la luminosidad y el croma y cambia solo el tono. Un **degradado pastel** es una mezcla de colores pálidos y suavemente teñidos: rosa empolvado hacia mantequilla, lila hacia cielo, menta hacia crema. Los pasteles tienen una luminosidad alta y muy poca saturación, por eso se sienten suaves, frescos y amables. El problema es que también es fácil pasarse de dulce con ellos, y casi imposible leer texto blanco encima. Las dos cosas tienen arreglo con una tinta oscura, un fondo de papel y un color un poco menos obvio que el resto. ## Qué hace que un color sea pastel Un pastel es un color con mucho blanco: luminosidad alta y saturación de baja a moderada. En el espacio de color OKLCH, la mayoría de los pasteles están en torno a 0,88 y 0,95 de luminosidad con un croma pequeño. Eso da un truco sencillo para crear degradados pastel uniformes: fija la luminosidad y el croma y cambia solo el tono. Así todos los colores tienen el mismo peso visual y ninguno grita. - Espectro pastel en 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 y mantequilla: `linear-gradient(135deg, #fecdd3 0%, #fef3c7 100%)` - Glicinia: `linear-gradient(135deg, #e9d5ff 0%, #bfdbfe 100%)` - Crema de pistacho: `linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%)` - Cielo y menta: `linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%)` - Bruma pervinca: `linear-gradient(135deg, #e0e7ff 0%, #fbcfe8 100%)` - Rosa palo y salvia: `linear-gradient(135deg, #f3d9d5 0%, #d5e3d0 100%)` - Espuma de mar: `linear-gradient(135deg, #ccfbf1 0%, #a5f3fc 100%)` - Albaricoque y rosa: `linear-gradient(135deg, #ffedd5 0%, #fecaca 100%)` Parejas pastel con códigos para copiar. La primera está hecha en OKLCH con luminosidad y croma fijos, así que sus tres tonos se sienten igual de suaves. ## Fresco o empalagoso: la diferencia Los pasteles se vuelven empalagosos cuando todo es igual de dulce: rosa, azul bebé y lila con la misma saturación, texto blanco, todo redondeado. Se sienten frescos cuando algo en el diseño hace contrapeso. Puede ser un color más apagado y grisáceo, una tinta profunda para las palabras, un fondo de papel blanco roto o una tipografía nítida y seria. ### Empalagoso - Rosa, azul bebé y lila con la misma intensidad - Texto blanco sobre un fondo pálido - Fondo blanco puro, perfectamente liso - Todos los elementos redondeados y burbujeantes ### Fresco - Un color apagado o inesperado, como salvia o albaricoque - Una tinta profunda de un tono vecino - Un fondo de papel blanco roto con un grano ligero - Una serifa segura o una sans compacta para las palabras ## Combina los pasteles con una tinta oscura El texto blanco sobre un pastel casi siempre suspende el contraste, porque los dos son muy claros. La solución es una tinta oscura: una versión profunda de uno de los tonos del propio degradado, como índigo sobre lila o burdeos sobre rosa. Mantiene la paleta en una misma familia y se lee con comodidad. Aquí tienes proporciones medidas de tintas habituales sobre fondos pastel. Para las reglas que hay detrás, consulta [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility). | Color del texto | Sobre rosa `#fbcfe8` | Sobre lila `#c4b5fd` | | --- | --- | --- | | `#ffffff` blanco | 1,4:1, no cumple | 1,9:1, no cumple | | `#6b7280` gris medio | 3,5:1, solo texto grande | 2,6:1, no cumple | | `#9d174d` burdeos | 5,7:1, cumple AA | 4,3:1, solo texto grande | | `#312e81` índigo | 8,3:1, cumple AAA | 6,2:1, cumple AA | | `#1f2937` tinta | 10,6:1, cumple AAA | 8,0:1, cumple AAA | Proporciones de contraste según WCAG 2. El texto de lectura necesita al menos 4,5:1 y el texto grande al menos 3:1. Cuanto más profundo es el pastel, más oscura debe ser la tinta. - Papel: #f8f1ea - Rosa empolvado: #fbcfe8 - Lila: #e9d5ff - Salvia: #d5e3d0 - Mantequilla: #fde68a - Tinta índigo: #312e81 Un sistema pastel completo: un fondo de papel, tres pasteles, un acento cálido y una tinta oscura para cada palabra. ## Usa un fondo de papel Los pasteles sobre blanco puro pueden verse desvaídos, y en pantalla el blanco puro es lo más brillante que existe. Un fondo blanco roto cálido, como `#f8f1ea`, hace que los colores pastel parezcan intencionados, como acuarela o tinta de risografía sobre papel. Deja que el pastel florezca desde una esquina y se funda con el papel, en lugar de llenar toda la superficie. - Rosa sobre papel: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f8f1ea 55%)` - Salvia sobre papel: `radial-gradient(circle at 85% 80%, #d5e3d0 0%, #f8f1ea 60%)` - Lila desde arriba: `radial-gradient(ellipse at 50% 0%, #e9d5ff 0%, #f8f1ea 65%)` Manchas pastel sobre un fondo de papel. Casi toda la superficie sigue siendo papel, y eso es lo que las mantiene serenas. Un grano ligero refuerza aún más la sensación de papel. Mantenlo muy sutil en los pasteles, porque el ruido se nota mucho en los colores claros; [los degradados con grano](https://gradiently.design/es/guide/grainy-gradients) dan cantidades de partida. ## Un degradado pastel en CSS En CSS, el fondo de papel, la mancha de color y la tinta se juntan en unas pocas líneas. Mezclar los pasteles en OKLCH evita que el centro se vuelva calizo cuando los tonos están lejos, y una pista de color deja que el papel ocupe casi toda la superficie. ```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 rosa y salvia sobre un lavado de papel a lila, con tinta índigo para las palabras. Para el resultado más limpio, usa parejas pastel de tonos cercanos, como en [los degradados de dos colores](https://gradiently.design/es/guide/two-color-gradients). Cuando quieras juntar pasteles lejanos, haz que pasen por un lila pálido o un mantequilla para que el centro siga teñido en lugar de volverse gris blanquecino. ## Dónde funcionan los degradados pastel - Belleza, cuidado de la piel, bienestar y perfumería - Bebés, bodas, papelería y regalos - Campañas de primavera y Pascua, panaderías y cafeterías - Onboarding de software tranquilo y páginas de ayuda - Estéticas suaves y soñadoras, sobre todo con brillo holográfico; consulta [los degradados holográficos](https://gradiently.design/es/guide/holographic-gradients) Una publicación vertical de rebajas titulada Selección de primavera sobre un degradado pastel suave con letras oscuras Un campo pastel con una tinta oscura se lee sereno y seguro a tamaño de feed. Una versión en historia vertical del mismo diseño pastel de rebajas El mismo estilo como historia, con el color floreciendo desde arriba. Si te gusta la suavidad pero quieres más contraste, da un paso hacia [los fondos estéticos](https://gradiently.design/es/guide/aesthetic-backgrounds) con un acento más profundo. También puedes buscar en el Mercado palabras como «lila suave» o «melocotón pálido» para encontrar Marks pastel y diseñar con ellos al momento. ## FAQ ### ¿Qué es un degradado pastel? Un degradado pastel es una mezcla de colores pálidos y de saturación suave, como rosa empolvado, lila, mantequilla y menta. ### ¿Qué color de texto va sobre un degradado pastel? Una tinta oscura, idealmente una versión profunda de uno de los tonos del degradado, como índigo o burdeos. El texto blanco suele suspender el contraste sobre los pasteles. ### ¿Cómo hago que los colores de un degradado pastel se sientan uniformes? Créalos en OKLCH con la misma luminosidad y el mismo croma, cambiando solo el tono, para que todos los colores tengan el mismo peso. ### ¿Cómo evito que un degradado pastel se vea demasiado dulce? Añade un color apagado o inesperado, usa una tinta oscura para el texto, ponlo sobre un fondo de papel blanco roto y combínalo con una tipografía segura. ### ¿Qué color de fondo va con los pasteles? Un blanco roto cálido como `#f8f1ea` hace que los pasteles parezcan impresos y serenos; el blanco puro puede hacer que se vean desvaídos.