# Degradado lavanda: códigos de morado suave [Canonical HTML page](https://gradiently.design/es/guide/lavender-gradient) La lavanda es el morado con el volumen bajado: serena, algo soñadora, nunca estridente. Lo difícil es mantenerla suave sin que se vuelva gris o empalagosa. Estos códigos lo logran. ## The short version - Un degradado lavanda mezcla morados pálidos y algo azulados, a menudo con blanco, rubor, melocotón o un azul suave. - La lavanda se vuelve gris cuando sus paradas están demasiado desaturadas, y empalagosa cuando todas son rosa y violeta pastel. - Un compañero cálido como el melocotón o la mantequilla, o un verde frío como la salvia, da carácter a la lavanda. - El texto blanco no se lee sobre lavanda pálida; un ciruela profundo como #2e1065 sí. - La lavanda va bien con bienestar, sueño, bodas, belleza y productos digitales tranquilos. Un **degradado lavanda** mezcla morados pálidos y suavemente azulados, normalmente de casi blanco a un lila delicado o a un azul pervinca. Transmite calma, ligereza y un punto de ensoñación, por eso lo adoran las marcas de bienestar, sueño, belleza y bodas. Dos cosas pueden salir mal: si le quitas demasiado color se vuelve gris polvoriento, y si le pones demasiado rosa se vuelve empalagoso. Mantén una parada claramente coloreada, combínala con un compañero cálido o verde y pon tus palabras en ciruela profundo. ## Lavanda, lila, pervinca y malva Los morados suaves tienen varios nombres y cada uno se inclina hacia un lado. Saber cuál quieres facilita la mezcla: la lavanda y la pervinca tiran al azul, el lila y el malva tiran al rosa. - Bruma de lavanda: #f5f3ff - Lavanda: #e6e0f8 - Violeta suave: #ddd6fe - Lila: #c4b5fd - Pervinca: #c7d2fe - Orquídea: #d8b4e2 - Malva: #b497bd - Tinta ciruela: #2e1065 La familia de los morados suaves y un ciruela profundo para el texto. Lavanda y pervinca son más fríos; orquídea y malva, más cálidos. ## Degradados lavanda pálidos Son los más discretos, los más cercanos al blanco, para fondos que sostienen mucho texto: cartas de un salón de té, un boletín, las pantallas de bienvenida de una app. Apenas se notan, así que úsalos donde el protagonista es el contenido. - Bruma de lavanda: `linear-gradient(180deg, #faf9ff 0%, #e6e0f8 100%)` - Violeta suave: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%)` - Baño de pervinca: `linear-gradient(135deg, #eef2ff 0%, #e6e0f8 50%, #f5f3ff 100%)` - Luz lila: `radial-gradient(circle at 70% 25%, #ddd6fe 0%, #f5f3ff 55%, #ffffff 100%)` Lavandas casi blancas. Cada una conserva una parada con color de verdad para que nunca se lea como gris. ## Degradados lila y pervinca Un paso más profundo, la lavanda se convierte en un color claro y no en un tinte. De lila a pervinca obtienes una mezcla fría y moderna que luce bien en pantallas de móvil; de lila a orquídea es más cálida y romántica. Mantén ambos extremos con una luminosidad parecida y la mezcla seguirá suave. - De lila a pervinca: `linear-gradient(135deg, #c4b5fd 0%, #a5b4fc 100%)` - De lila a orquídea: `linear-gradient(135deg, #ddd6fe 0%, #d8b4e2 100%)` - Lila crepuscular: `linear-gradient(160deg, #e0e7ff 0%, #c4b5fd 50%, #a78bfa 100%)` - De azul bebé a lila: `linear-gradient(90deg, #bfdbfe 0%, #c4b5fd 100%)` Lavandas medias. Las que tiran al azul se sienten digitales y serenas; las que tiran al rosa, románticas. ## Lavanda con melocotón, mantequilla o salvia Sola, la lavanda puede resultar demasiado dulce. Un compañero de fuera de la familia del morado lo arregla. El melocotón y la mantequilla aportan calidez y hacen que la lavanda parezca la luz de primera hora de la tarde. La salvia añade algo maduro y botánico, por eso lavanda y salvia es una combinación tan popular en bodas. En estos tintes pálidos los colores opuestos se mezclan sin enturbiarse, porque hay poca saturación que perder. Los [degradados pastel](https://gradiently.design/es/guide/pastel-gradients) tratan ese principio en toda la rueda. - Lavanda y melocotón: `linear-gradient(135deg, #ddd6fe 0%, #fde2cf 100%)` - Lavanda y mantequilla: `linear-gradient(135deg, #e6e0f8 0%, #fef3c7 100%)` - Lavanda y salvia: `linear-gradient(135deg, #e6e0f8 0%, #dbe5d4 100%)` - Cielo de tarde: `linear-gradient(180deg, #c7d2fe 0%, #ddd6fe 45%, #fbcfe8 100%)` Lavanda con un compañero. Cada una resulta menos dulce y más parecida a un lugar o una hora del día reales. ## Degradados lavanda crepusculares Llevar la lavanda hacia el violeta o el ciruela da el crepúsculo: aún suave arriba, intenso abajo. Funcionan para apps de sueño, marcas de velas, yoga nocturno, perfume y librerías. El extremo profundo también da al texto blanco un lugar donde apoyarse. Para toda la gama de morados más atrevidos, consulta los [degradados morados](https://gradiently.design/es/guide/purple-gradient). - Crepúsculo: `linear-gradient(180deg, #e6e0f8 0%, #a78bfa 50%, #4c1d95 100%)` - Hora de dormir: `linear-gradient(180deg, #ddd6fe 0%, #8b5cf6 55%, #2e1065 100%)` - Crepúsculo malva: `radial-gradient(circle at 50% 20%, #ede9fe 0%, #b497bd 40%, #4a2e5c 100%)` Lavanda arriba, ciruela abajo. Pon los titulares en blanco en la mitad inferior, o en ciruela en la superior. ## Ideas de degradado lavanda que puedes publicar esta semana A menudo se elige la lavanda porque resulta agradable y luego se usa sin plan. Estas son piezas concretas en las que de verdad ayuda: - **Una app de sueño o meditación:** «Hora de dormir» como fondo de bienvenida, texto ciruela arriba y el botón en la zona de violeta profundo. - **Una publicación de floristería para el Día de la Madre en 1080×1350:** «Lavanda y melocotón» con una sola frase: «Los pedidos cierran el jueves». - **Un lanzamiento de cuidado de la piel:** «Bruma de lavanda» detrás de las fotos del producto, para que el envase lleve el color. - **Un banner de LinkedIn de terapeuta o coach en 1584×396:** «Baño de pervinca» transmite calma y profesionalidad sin la frialdad del azul corporativo. - **Una lista de precios de spa en un cartel A4:** «Lavanda y salvia» con texto berenjena, legible desde el otro lado del mostrador de recepción. ## Cómo evitar una lavanda gris o empalagosa ### Se vuelve gris o empalagosa - Todas las paradas desaturadas, como `#e2e0e6` - Lavanda junto a gris frío - Lavanda, rosa bebé y violeta a la vez - Texto blanco sobre un lila pálido ### Sigue suave y clara - Al menos una parada con color claro, como `#c4b5fd` - Lavanda junto a blanco cálido o crema - Un solo compañero: melocotón, mantequilla o salvia - Texto ciruela profundo en las zonas pálidas Una comprobación útil: pon una muestra de gris puro junto a tu lavanda. Si te cuesta distinguirlas de un vistazo, sube el color un punto. Comprueba también en un móvil con poco brillo, donde los tintes muy pálidos se pierden con facilidad. ## Texto sobre un degradado lavanda La lavanda es muy clara, así que el texto blanco falla en casi toda ella: el blanco sobre lila `#c4b5fd` mide menos de 2 a 1. El ciruela profundo `#2e1065` sobre el mismo lila mide más de 8 a 1 y mantiene el texto dentro de la familia del morado en lugar de la dureza del negro. Para un aspecto más suave sobre las lavandas más pálidas, un berenjena apagado como `#3b2f4a` sigue aprobando con holgura. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) tiene los detalles. Una invitación de boda para reservar la fecha con texto ciruela profundo sobre un degradado lavanda pálido y melocotón Una invitación de 5×7 pulgadas a 300 ppp, en lavanda pálido con texto ciruela. El mismo diseño de reserva de fecha como story vertical de móvil sobre el degradado lavanda El mismo diseño como story para compartir la noticia, renderizado en su propio tamaño. Con Pro, Gradiently puede llevar ese único diseño de la impresión a todos los tamaños de redes en un solo paso: el Mark se renderiza de nuevo en cada formato y la tinta automática elige texto claro u oscuro en cada línea a partir de la propia paleta del Mark. Para más sobre papelería, consulta las [paletas de colores para bodas](https://gradiently.design/es/guide/wedding-color-palettes). ## CSS de degradado lavanda Por defecto, los navegadores mezclan los colores del degradado en sRGB, lo que puede apagar el centro de una mezcla entre dos tonos. Interpolar en OKLCH mantiene limpio el punto medio, y un hex de reserva cubre los navegadores sin soporte. Consulta los [degradados CSS en OKLCH](https://gradiently.design/es/guide/css-gradient-oklch) para ver la compatibilidad. ```css .card-lavender { background: linear-gradient(135deg, #f5f3ff, #ddd6fe, #fde2cf); color: #2e1065; } @supports (background: linear-gradient(in oklch, red, blue)) { .card-lavender { background: linear-gradient(in oklch 135deg, #f5f3ff, #ddd6fe, #fde2cf); } } ``` De bruma de lavanda a violeta suave y melocotón, con texto ciruela. La versión OKLCH mantiene la mezcla brillante en el centro. ## FAQ ### ¿Cuál es el código hex de la lavanda? El color CSS `lavender` es `#e6e6fa`, un morado azulado muy pálido. Muchos diseñadores usan versiones algo más intensas, como `#e6e0f8` o `#ddd6fe`. ### ¿Qué colores combinan bien con un degradado lavanda? Melocotón, amarillo mantequilla, verde salvia, crema y azul suave. Un ciruela profundo funciona bien para el texto. ### ¿Por qué mi degradado lavanda se ve gris? Las paradas están demasiado desaturadas o junto a un gris frío. Da color claro al menos a una parada y combínala con blanco cálido en lugar de gris. ### ¿Qué diferencia hay entre lavanda y lila? La lavanda tira ligeramente al azul y suele ser más pálida; el lila tira ligeramente al rosa y es algo más intenso. ### ¿Qué color de texto va sobre la lavanda? Ciruela profundo o berenjena, como `#2e1065`. El texto blanco no supera el contraste sobre lavanda pálida.