# Degradado rosa y morado: códigos del dulce al ocaso

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

El rosa y el morado pueden ser dulces, glamurosos o discretamente sombríos, según lo claro y lo saturado que sea el resultado. Aquí tienes los códigos de cada paso y cómo elegir.

## The short version

- Un degradado rosa y morado mezcla tonos vecinos como el rosa #ec4899, el magenta #c026d3 y el violeta #9333ea, así que la transición se mantiene brillante sin color puente.
- La misma pareja parece algodón de azúcar cuando es pálida, glamour cuando es saturada y ocaso cuando es oscura.
- El texto blanco falla sobre el rosa intenso y el lila pálido, así que usa ahí una tinta ciruela profundo y reserva el blanco para el magenta, el violeta y los fondos oscuros.
- Añadir un poco de naranja, azul u oro a un degradado rosa y morado lo hace mucho menos previsible que la mezcla estándar de dos colores.
- El rosa y el morado van bien con belleza, vida nocturna, música, celebraciones y marcas de creadores, y un fondo oscuro evita que parezcan infantiles.

Un **degradado rosa y morado** mezcla dos vecinos del círculo cromático, un rosa como `#ec4899` y un violeta como `#9333ea`, con magenta y orquídea entre medias. Como los tonos son contiguos, la mezcla se mantiene viva de lado a lado. Lo que lo cambia todo es la luminosidad: si lo dejas pálido, sale algodón de azúcar; si subes la saturación, glamour; si lo oscureces, ocaso. Los códigos de abajo van de claro a oscuro, para que elijas primero el ambiente y después los valores hex.

## Ambientes del degradado rosa y morado de un vistazo

| Ambiente | Paradas típicas | Sensación | Sirve para |
| --- | --- | --- | --- |
| Algodón de azúcar | `#fbcfe8` a `#e9d5ff` | Dulce, suave, joven | Pastelerías, baby showers, papelería |
| Orquídea | `#f0abfc` a `#c084fc` | Onírico, romántico | Belleza, bodas, bienestar |
| Magenta | `#ec4899` a `#9333ea` | Atrevido, glamuroso | Vida nocturna, música, creadores |
| Ocaso | `#2e0a2f` a `#9d174d` | Sombrío, adulto | Fragancias, cócteles, eventos nocturnos |

Cuatro ambientes a partir de una pareja. Cada paso de la tabla es más oscuro o más saturado que el anterior.

- Rosa caramelo: #fbcfe8
- Chicle: #f9a8d4
- Rosa intenso: #ec4899
- Magenta: #c026d3
- Violeta orquídea: #a855f7
- Violeta: #9333ea
- Lila: #e9d5ff
- Tinta ciruela: #2e0a2f

Una paleta de trabajo para la pareja, con los extremos claro y oscuro que necesitas para el texto.

## Degradados rosa y morado caramelo

Los rosas y lilas pálidos juntos son lo más suave que puede ser un color. Van con todo lo dulce o delicado, pero pueden caer enseguida en lo infantil. La solución es un fondo ligeramente cálido, un melocotón o un crema en un extremo, y una tipografía oscura muy segura.

- Algodón de azúcar: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Leche de fresa: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Melocotón, rosa, lila: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Mezclas caramelo, todas con tinta ciruela profundo. El melocotón de la tercera evita que resulte empalagosa.

Para más de esta suavidad, [degradados pastel](https://gradiently.design/es/guide/pastel-gradients) cubre toda la familia, y [degradados lavanda](https://gradiently.design/es/guide/lavender-gradient) se inclina más hacia el morado.

## Degradados orquídea y magenta

Sube la saturación y la pareja se vuelve glamurosa. Es el territorio del esmalte de uñas, las pulseras de festival y las portadas de discos. Usa una ligera inclinación o un resplandor radial en lugar de una diagonal plana, y deja una zona más calmada para las palabras.

- Del rosa intenso al violeta: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Flor de orquídea: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Glamour de frutos rojos: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Remolino iridiscente: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Degradados rosa y morado saturados. El cónico parece un destello, cercano a los [degradados holográficos](https://gradiently.design/es/guide/holographic-gradients).

## Ocaso: degradados rosa y morado oscuros

Oscurece la pareja y madura al instante. Un fondo negro ciruela con luz frambuesa y violeta recuerda al cielo veinte minutos después de la puesta de sol, o a una coctelería de luz tenue. Son los más versátiles del conjunto y admiten sin problema texto blanco o rosa pálido.

- Veinte minutos después del atardecer: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Resplandor frambuesa: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- De ciruela a rosa: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Foco violeta de escenario: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Degradados rosa y morado oscuros. Añade un grano fino, porque las mezclas oscuras son las primeras en mostrar banding.

Estos se parecen a los [degradados de atardecer](https://gradiently.design/es/guide/sunset-gradient) y a los [degradados galaxia](https://gradiently.design/es/guide/galaxy-gradient), y puedes tomar prestado libremente de ambos.

## Añadir un tercer color sin ensuciar

La diagonal estándar de rosa intenso a violeta está en todas partes, así que un color extra es la forma más rápida de hacerla tuya. Elige un color vecino del rosa o del morado: el naranja y el coral están junto al rosa, el azul y el índigo junto al morado. El verde está frente al magenta, por eso el rosa hacia el verde se vuelve gris en el medio.

- Violeta, rosa, mandarina: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Hora azul: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta con oro: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Tres degradados rosa y morado con un tercer color vecino. Cada paso se mantiene saturado.

## Cómo elegir un degradado rosa y morado para tu marca

1. **Decide primero si claro u oscuro** Casi todo el ambiente viene de la luminosidad. Una mezcla pálida dice delicadeza; un fondo ciruela dice noche. Elige uno y mantenlo en todas las publicaciones.
2. **Elige qué color manda** Si manda el rosa, se siente más cálido y juguetón. Si manda el morado, más frío y misterioso. Dale al protagonista más o menos dos tercios de la superficie.
3. **Planea dónde va el texto** Pon el titular sobre el extremo más oscuro y calmado y el rosa más brillante en una esquina, para no competir con el fondo por la atención.
4. **Pruébalo en todos los tamaños** Una mezcla que funciona en una publicación cuadrada puede dejar su zona más brillante detrás del texto en una historia. Revisa publicación, historia y banner antes de decidirte.

Si publicas a menudo, apunta el resultado como una receta corta: fondo, color principal, acento, dónde está la luz. Esa sola línea mantiene coherente todo un feed, que importa más que cualquier degradado bonito suelto. [Coherencia de marca](https://gradiently.design/es/guide/brand-consistency) va más allá.

## Colores de texto sobre rosa y morado

El rosa intenso es más claro de lo que parece, así que los titulares blancos sobre rosa intenso son más débiles de lo que se espera. El violeta y el magenta sostienen bien el blanco. En el extremo pálido, un ciruela profundo es la tinta que mantiene el diseño en una sola familia. Los ratios son contraste WCAG; busca 4,5:1 para texto pequeño y 3:1 como mínimo para titulares grandes. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) explica los umbrales.

| Fondo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| Rosa intenso `#ec4899` | Blanco | 3,5:1 | Solo titulares grandes |
| Rosa fuerte `#db2777` | Blanco | 4,6:1 | Bien |
| Magenta `#c026d3` | Blanco | 4,7:1 | Bien |
| Violeta `#9333ea` | Blanco | 5,4:1 | Bien |
| Chicle `#f9a8d4` | Tinta ciruela `#3b0a3f` | 8,9:1 | Excelente |
| Tinta ciruela `#2e0a2f` | Chicle `#f9a8d4` | 9,6:1 | Excelente, el rosa como tinta |

Mide detrás de cada línea de texto, en el punto más claro del degradado.

Una publicación vertical de salón de uñas con letras blancas sobre un degradado saturado de rosa y violeta

Una publicación de salón de uñas sobre orquídea saturado, con texto blanco en el lado violeta.

Una historia vertical de noche de club con letras rosa pálido sobre un degradado ciruela oscuro iluminado con frambuesa abajo

Una historia de noche de club sobre ocaso ciruela con luz frambuesa en la parte baja del encuadre.

## CSS del degradado rosa y morado

```css
.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Una sección de ocaso con resplandor frambuesa y un titular de rosa a violeta con texto de fondo recortado.

El texto con degradado llama la atención, pero úsalo solo en palabras cortas de exhibición, nunca en el cuerpo del texto. [Texto con degradado en CSS](https://gradiently.design/es/guide/css-gradient-text) cubre las alternativas. Si quieres un look rosa y morado que nadie más pueda publicar, el Mercado de Gradiently te deja buscar Marks por palabras de color como «orquídea». Cada Mark es único y, una vez que lo reservas, solo tú puedes exportar con él; además mantiene legible el texto en los dos extremos de la mezcla por sí solo.

## FAQ

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

Un clásico es `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. Para algo más sombrío, prueba `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### ¿Combinan el rosa y el morado?

Sí. Son vecinos en el círculo cromático, con el magenta entre ambos, así que se mezclan limpiamente con cualquier luminosidad.

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

El blanco se lee bien sobre magenta, violeta y ciruela oscuro. Sobre rosa intenso usa blanco solo en titulares grandes, y sobre rosa pálido o lila usa un ciruela profundo como `#3b0a3f`.

### ¿Cómo hago que un degradado rosa y morado parezca menos infantil?

Hazlo más oscuro o más saturado, usa un fondo ciruela y añade en una zona pequeña un tercer color más adulto, como el oro o el azul profundo.

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

El magenta, alrededor de `#c026d3`, con la orquídea como su versión más clara.