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

[Canonical HTML page](https://gradiently.design/es/guide/blue-purple-gradient)

El azul y el morado son vecinos en el círculo cromático, así que se mezclan mejor que casi cualquier otra pareja. Por eso mismo tantos degradados azul y morado se parecen entre sí. Aquí tienes veinte que no.

## The short version

- Un degradado azul y morado mezcla tonos vecinos como el azul #3b82f6, el índigo #4f46e5 y el violeta #7c3aed, así que la transición queda limpia sin necesidad de un color puente.
- El problema más habitual de las mezclas de azul a morado no es el barro, sino la monotonía, porque la diagonal por defecto de índigo a violeta se usa en todas partes.
- Las mezclas entre cian y rosa, o entre azules apagados y morados apagados, pueden volverse grises en el centro, y interpolar en OKLCH las mantiene vivas.
- El texto blanco se lee bien sobre índigo y violeta, pero a menudo falla sobre azules medios y lavandas, donde funciona mejor una tinta índigo profundo.
- Un fondo oscuro, un tercer color usado con mesura y un poco de grano hacen que un degradado azul y morado parezca pensado y no genérico.

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](https://gradiently.design/es/guide/analogous-colors) explican el principio, y el [círculo cromático](https://gradiently.design/es/guide/color-wheel) muestra dónde se sitúa cada tono.

- Medianoche: #0f0a2e
- Índigo profundo: #1e1b4b
- Azul real: #1d4ed8
- Azul: #3b82f6
- Índigo: #4f46e5
- Violeta: #7c3aed
- Lavanda: #a78bfa
- Bruma de lavanda azulada: #c7d2fe

La familia del azul al morado. Elige tres o cuatro muestras contiguas y el degradado se mantendrá vivo de principio a fin.

## 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.

- Índigo de medianoche: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Salida de luna violeta: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Azul marino a ciruela: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Brillo del horizonte: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Corriente profunda: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Degradados azul y morado oscuros. El banding se nota más en mezclas como estas, así que añade grano antes de exportar.

## 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](https://gradiently.design/es/guide/pastel-gradients).

- Neblina lavanda azulada: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Lavanda matinal: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Nube lila: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Campo de aciano: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Del papel al violeta: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Mezclas suaves de lavanda azulada y lila. El texto índigo profundo se lee sobre todas ellas.

## 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](https://gradiently.design/es/guide/neon-gradients) tiene la técnica completa.

- Violeta eléctrico: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Del cielo a la orquídea: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Pulso índigo: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Giro ultravioleta: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Del negro al ultravioleta: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Degradados azul y morado saturados. El primero es el clásico; los demás son versiones menos esperadas.

## 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.

- Crepúsculo con rosa: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Aurora turquesa: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Índigo con oro: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Amanecer lavanda: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Azul, violeta, carmesí: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Veinte códigos en total. El rosa, el verde azulado y el carmesí están junto al azul o al morado en el círculo; el dorado sigue siendo una pequeña luz y el melocotón se queda pálido, así que ninguna mezcla pasa por gris.

## 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](https://gradiently.design/es/guide/muddy-gradients) e [interpolación de degradados](https://gradiently.design/es/guide/gradient-interpolation) profundizan en ello.

```css
/* 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;
}
```

Añadir `in oklch` cambia cómo el navegador mezcla las paradas. Los navegadores antiguos ignoran toda la declaración, así que deja un color de fondo como alternativa.

## 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](https://gradiently.design/es/guide/grainy-gradients) 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

| Fondo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| Índigo `#4f46e5` | Blanco | 6,3:1 | Bien |
| Violeta `#7c3aed` | Blanco | 5,7:1 | Bien |
| Azul `#3b82f6` | Blanco | 3,7:1 | Solo titulares grandes |
| Lavanda `#a78bfa` | Blanco | 2,7:1 | No cumple |
| Lavanda `#a78bfa` | Índigo profundo `#1e1b4b` | 5,9:1 | Bien |
| Bruma de lavanda azulada `#c7d2fe` | Índigo profundo `#1e1b4b` | 10,7:1 | Excelente |

Ratios de contraste WCAG. El azul medio es más claro de lo que parece, lo que pilla a muchos diseños de azul a morado por el extremo azul.

Una publicación cuadrada de LinkedIn que anuncia la versión 3 con letras blancas sobre un degradado índigo oscuro y violeta

Una publicación de LinkedIn sobre un fondo índigo oscuro. Texto claro, resplandor violeta en un solo lado.

Una historia vertical con letras índigo oscuro sobre un degradado de lavanda azulada pálida y lila

Una historia sobre lavanda azulada suave con tinta índigo profundo.

Cuando las palabras cruzan del extremo oscuro al claro de un mismo degradado, ninguna tinta funciona en todas partes. [Texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) 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.

## FAQ

### ¿Cuál es un buen código de degradado azul y morado?

Uno fiable es `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. Para algo menos esperado, parte de un fondo oscuro: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### ¿Combinan el azul y el morado en un degradado?

Sí. Son vecinos en el círculo cromático, así que cada paso entre ellos es un color limpio y saturado, como el índigo.

### ¿Por qué mi degradado de azul a rosa se ve gris en el medio?

El navegador mezcla en sRGB por defecto, y eso puede apagar las mezclas que cruzan buena parte del círculo. Añade `in oklch` después del ángulo para mantener vivo el centro.

### ¿Qué color de texto va sobre un degradado azul y morado?

El blanco se lee bien sobre índigo y violeta. Sobre azul medio, lavanda y lavanda azulada, un índigo profundo como `#1e1b4b` es más seguro.

### ¿Qué color hay entre el azul y el morado?

El índigo. Un índigo típico en diseño es `#4f46e5`, y los índigos más oscuros rondan `#312e81`.