La versión corta
- Un degradado morado mezcla tonos de violeta, morado, ciruela o lavanda, a menudo con un azul o un rosa vecinos.
- El morado se asocia habitualmente con la creatividad, el lujo y la imaginación, y se ha convertido en un color muy común en las marcas de tecnología.
- Los morados profundos como #4c1d95 llevan texto blanco con comodidad, mientras que los lavandas claros necesitan texto oscuro.
- Los morados medios como #a78bfa son los más difíciles para el texto, porque son demasiado claros para la letra blanca y demasiado saturados para resultar serenos bajo el negro.
- Añadir calidez, profundidad o grano es la forma más rápida de que un degradado morado no parezca un ajuste predefinido.
En esta página
Un degradado morado mezcla tonos de violeta, morado, ciruela o lavanda, a menudo con un azul o un rosa vecinos. Es uno de los colores de degradado más populares en webs, apps y redes sociales, porque el morado se siente imaginativo y un poco lujoso, y brilla de maravilla en una pantalla oscura. Aquí tienes paletas de degradado morado agrupadas por ambiente, cada una con CSS para copiar, seguidas de cómo poner texto encima y cómo evitar que se parezcan a las de todo el mundo.
La familia del morado: violeta, morado, ciruela y lavanda
«Morado» abarca una gama amplia. El violeta tira hacia el azul y se siente frío y eléctrico. El magenta tira hacia el rosa y se siente cálido y ruidoso. El ciruela es un morado profundo y rojizo que se siente rico; el lavanda es un morado pálido y grisáceo que se siente suave. Saber cuál quieres facilita todas las demás decisiones.
Qué transmite un degradado morado
En buena parte de Europa y América, el morado se asocia con la creatividad, la imaginación y el lujo. El vínculo con el lujo es histórico: durante siglos el tinte morado fue escaso y caro, así que lo vestían los poderosos. En los últimos años también se ha convertido en uno de los colores más comunes en las marcas de software y tecnología, donde sugiere algo ingenioso sin la seriedad del azul. En otros lugares las asociaciones cambian; el significado de los colores en el mundo da los detalles.
- Herramientas y estudios creativos: el violeta y el magenta se sienten ingeniosos y algo juguetones.
- Belleza y bienestar: los lavandas y los lilas se sienten suaves y reparadores.
- Música, ocio nocturno y videojuegos: los morados profundos con un brillo vivo se sienten como la noche.
- Productos premium: el ciruela y la amatista casi negra se sienten ricos, sobre todo con un reflejo cálido.
La contrapartida es lo familiar que resulta. Como tantas marcas tecnológicas usan un degradado violeta, el tuyo tiene que ganarse la diferencia con profundidad, calidez, material o la constancia con que lo usas.
Degradados morados oscuros
Los degradados morados oscuros se sienten ricos y nocturnos. Funcionan para música, ocio nocturno, productos premium y todo lo que deba sentirse como el anochecer. Mantén la parada más oscura cerca del negro y deja que un color iluminado surja de ella.
Degradados morados claros y pastel
Los morados pálidos se sienten serenos, suaves y algo soñadores. Encajan en bienestar, belleza, papelería y todo lo que deba sentirse delicado. Necesitan texto oscuro y se ven mejor con un toque de calidez o de azul para que no se lean como un lila grisáceo plano.
Degradados morados vivos
Los morados vivos son los más ruidosos y los más comunes. Úsalos para lanzamientos, videojuegos, eventos y marcas atrevidas, y aléjalos de las lecturas largas. Mezclar el morado hacia el rosa o el naranja mantiene brillante el centro; mezclarlo hacia el verde lo vuelve gris.
Texto sobre degradados morados
Con el morado es fácil equivocarse con el texto, porque los morados medios están en un punto incómodo: demasiado claros para la letra blanca, demasiado oscuros y saturados para que el negro resulte sereno. Elige la tinta según dónde queda realmente el texto.
| Texto sobre fondo | Contraste | Veredicto |
|---|---|---|
Blanco sobre #2e1065 | 15,2:1 | Excelente para cualquier texto |
Blanco sobre #4c1d95 | 11,0:1 | Excelente |
Blanco sobre #7c3aed | 5,7:1 | Bien para texto de lectura y texto grande |
Blanco sobre #a78bfa | 2,7:1 | No cumple, ni siquiera para texto grande |
#1e1033 sobre #a78bfa | 6,6:1 | Aquí funciona una tinta oscura |
#1e1033 sobre #ede9fe | 15,0:1 | Excelente |
En un degradado, comprueba el punto más claro detrás del texto blanco y el más oscuro detrás del texto oscuro. Texto sobre un degradado cubre la colocación, y el contraste de color explica las proporciones.
Oscuro y rico: una portada que encaja con la escucha nocturna.
Suave y claro: una publicación amable con tinta oscura.
Cómo evitar que un degradado morado parezca genérico
El de violeta a rosa a 135 grados es uno de los degradados más usados en cualquier parte. Es atractivo, pero ya no dice nada de quién lo usa. Cuatro pequeños cambios ayudan.
- Hazlo más profundo. Empieza en un morado casi negro en lugar de un violeta medio. La profundidad se lee como premium.
- Dale calidez. Añade un reflejo melocotón, albaricoque u oro en un extremo. El morado con una luz cálida se siente como el anochecer y no como un software.
- Cambia la forma. Un resplandor radial bajo o una caída vertical se sienten más como luz que un relleno en diagonal. Consulta los degradados radiales.
- Añade un material. Un grano fino o un brillo suave convierten una mezcla plana en una superficie. Consulta los degradados con grano.
.hero {
background-color: #1a0b2e;
background-image:
radial-gradient(circle at 75% 110%, #fdba74 0%, transparent 35%),
linear-gradient(in oklch 170deg, #0f0a1f 0%, #3b1a6e 55%, #7c3aed 100%);
}Si el morado es el color de tu marca, la constancia importa más que la mezcla exacta. El branding con degradados explica cómo hacer tuyo un morado. También puedes buscar en el Mercado de Gradiently «violeta profundo» o «lavanda» para ver Marks morados vivos.
Preguntas frecuentes
¿Qué colores combinan bien con el morado en un degradado?
El azul, el rosa, el magenta y los reflejos cálidos como el melocotón o el oro se mezclan limpiamente con el morado. El verde y el amarillo están enfrente y tienden a volverse grises en el centro de un degradado.
¿Cuál es el código CSS de un degradado morado?
Por ejemplo, linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%) da un degradado amatista profundo. Todos los ejemplos de esta página se pueden copiar directamente.
¿Qué color de texto funciona sobre un degradado morado?
El blanco funciona sobre morados profundos y medios oscuros, y una tinta morada casi negra funciona sobre morados claros y medios. Comprueba el contraste donde el degradado es más claro detrás del texto blanco.
¿Qué transmite un degradado morado?
El morado se asocia habitualmente con la creatividad, la imaginación y el lujo. También es muy común en las marcas de tecnología, lo que lo hace familiar pero más difícil para destacar.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
