Degradado azul y morado: 20 códigos que se mezclan bien

Un degradado azul y morado va entre tonos vecinos del círculo cromático: azul #3b82f6, índigo #4f46e5, violeta #7c3aed y los suaves azules lavanda y lilas que los rodean. Como los tonos están uno junto a otro, la mezcla queda limpia casi sola. Lo difícil es conseguir uno que no se parezca a los miles de iconos de apps y diapositivas de conferencias que ya lo usan. A continuación tienes veinte códigos en cuatro ambientes, los casos en que la mezcla sí se apaga y los colores de texto que se leen sobre cada uno.

Por qué el azul y el morado se mezclan tan bien

El morado es azul con un poco de rojo. Camina de uno a otro y cada paso intermedio es un color real y saturado: azul, índigo, violeta. Compáralo con mezclar azul y naranja, donde el punto medio es un gris plano. Los colores análogos explican el principio, y el círculo cromático muestra dónde se sitúa cada tono.

Degradados azul y morado oscuros: noche y profundidad

Empieza por lo oscuro y el degradado deja de parecer genérico al instante. Un fondo de medianoche con luz índigo y violeta recuerda a un cielo nocturno, una sala de conciertos o una app premium. Estos cinco lucen de maravilla con texto claro.

Degradados azul y morado suaves: lavanda azulada y lila

Aclara la familia y se vuelve tranquila, onírica y un poco nostálgica. Encaja con bienestar, sueño, papelería y todo lo que busque un ambiente delicado. Mantén la tinta oscura: el blanco desaparece en casi todos. Tienes más en degradados pastel.

Degradados azul y morado eléctricos

Sube la saturación y la pareja se vuelve ruidosa, sintética y muy digital. Sirven para videojuegos, música, lanzamientos tecnológicos y todo lo nocturno. Úsalos en franjas o resplandores y no en un cartel entero, y combínalos con un casi negro para que tengan contra qué brillar. Degradados neón tiene la técnica completa.

Degradados azul y morado con un tercer color

La forma más rápida de hacer tuyo un degradado azul y morado es un color extra usado con mesura. El rosa lo lleva al atardecer, el verde azulado a la aurora, el dorado al lujo y el melocotón a un amanecer suave.

Cuándo un degradado azul y morado se vuelve barro

De azul a violeta es seguro. Dos mezclas parecidas no lo son. El cian hacia el rosa cruza buena parte del círculo, y los azules grisáceos apagados hacia morados apagados dejan un centro sin vida. En ambos casos la solución es la misma: interpolar en OKLCH, que mantiene el brillo y la saturación parejos a lo largo de la mezcla. Degradados sucios e interpolación de degradados profundizan en ello.

/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}

Cómo hacer que un degradado azul y morado parezca menos genérico

La diagonal de violeta a azul es tan conocida que la gente la lee como un valor por defecto antes de leer lo que escribiste encima. No hacen falta colores exóticos para evitarlo. Bastan pequeñas decisiones deliberadas, que se acumulan.

• Elige primero un fondo. Un fondo de medianoche o de papel marca el ambiente más que el azul o el morado, y te separa al instante del valor brillante por defecto.
• Saca la luz de la diagonal. Pon el violeta más brillante en una esquina con un degradado radial en lugar de recorrerlo de borde a borde a 135 grados.
• Usa paradas desiguales. Deja que el índigo ocupe el 60 % de la superficie y el violeta solo el último tramo. Los tercios iguales parecen hechos por una máquina.
• Añade un acento en un solo lugar. Un toque de rosa, verde azulado o dorado, como en el conjunto de arriba, se recuerda mucho más que los colores base.
• Termina con grano. Una capa de ruido fino oculta el banding y convierte una mezcla de pantalla en una superficie; degradados con grano tiene el código.
• Renderiza cada tamaño por separado. La luz debe caer en un sitio con sentido tanto en una historia como en un banner, no donde la deje un recorte.

Los nombres de ambiente también ayudan. «Índigo de medianoche con un borde dorado» es una decisión que puedes repetir en todo un año de publicaciones; «degradado azul y morado» no.

Texto sobre un degradado azul y morado

Cuando las palabras cruzan del extremo oscuro al claro de un mismo degradado, ninguna tinta funciona en todas partes. Texto sobre un degradado repasa las opciones. En Gradiently, la tinta Auto lo resuelve línea a línea y elige tipografía clara u oscura a partir de la paleta del propio Mark, así que un fondo azul y morado nunca se traga un titular.