# Degradado magenta: códigos eléctricos entre rosa y morado

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

El magenta es uno de los colores más ruidosos de una pantalla y uno de los más difíciles de domar. Estos códigos muestran dónde está entre el rosa y el morado, con qué mezclarlo y qué ocurre al imprimirlo.

## The short version

- El magenta está a 300 grados en el círculo cromático HSL, a medio camino entre el rojo y el azul, y por eso no se lee ni como rosa ni como morado.
- En pantalla, el magenta puro es `#ff00ff`, el mismo valor que CSS llama fuchsia.
- El magenta se funde limpiamente con violeta, azul, naranja y cian, pero se vuelve gris si se mezcla directamente con verde.
- El magenta de imprenta es mucho menos intenso que el de pantalla, así que los degradados magenta brillantes se ven más apagados en papel.
- El texto blanco sobre magenta puro solo alcanza un contraste de 3,1 a 1, suficiente para titulares grandes pero no para texto pequeño.

Un **degradado magenta** mezcla el color vivo entre el rosa y el morado con un vecino: violeta para algo eléctrico, naranja para calor, cian para un look ciberpunk o casi negro para dar profundidad. El magenta puro de pantalla es `#ff00ff`, y es tan intenso que el degradado suele funcionar mejor cuando el magenta es un extremo de la mezcla y no toda ella. Los códigos de abajo cubren cada dirección, con notas sobre el texto y sobre cómo se comporta el magenta en imprenta.

## Magenta, rosa y morado: dónde está la frontera

En el círculo cromático HSL el magenta está a 300 grados, justo entre el rojo y el azul. Si te desplazas hacia el rojo se convierte en rosa intenso; si te desplazas hacia el azul se vuelve morado y luego violeta. El magenta también es famoso por no aparecer en el arcoíris: no existe una única longitud de onda de luz para él, y tu ojo lo percibe cuando recibe luz roja y azul a la vez. Eso explica en parte por qué parece tan artificial y eléctrico.

| Color | Hex | Tira a | Transmite |
| --- | --- | --- | --- |
| Violeta | `#7c3aed` | Azul | Calma, creatividad |
| Morado | `#a21caf` | Algo de azul | Riqueza, majestuosidad |
| Magenta | `#ff00ff` | Ninguno | Electricidad, estridencia |
| Magenta intenso | `#e6007e` | Algo de rojo | Audacia, moda |
| Rosa intenso | `#ff4fa3` | Rojo | Juego, calidez |

El vecindario del magenta. Un degradado magenta suele tomar uno de estos como segunda parada.

- Magenta de pantalla: #ff00ff
- Magenta eléctrico: #e600e6
- Magenta profundo: #a3006f
- Vino: #5c0045
- Orquídea: #f3a6f0
- Ultravioleta: #6a00f4
- Mandarina: #ff8a3d
- Cian: #00e5ff

El magenta y sus mejores compañeros. Ultravioleta, mandarina y cian lo llevan cada uno en una dirección completamente distinta.

Si lo que buscas de verdad es algo más suave y cálido, más cerca del chicle o del rosa palo que del neón, la colección de [degradados rosa](https://gradiently.design/es/guide/pink-gradient) es un mejor punto de partida. El magenta se gana su sitio cuando quieres un color ante el que nadie pueda seguir haciendo scroll.

## Códigos de degradado magenta eléctrico

Magenta hacia violeta o azul es la combinación eléctrica clásica. Avanza por el círculo cromático sin cruzar nada turbio, así que la mezcla se mantiene viva de principio a fin. Va bien con música, vida nocturna, videojuegos y herramientas creativas. Si quieres esta dirección con más azul que magenta, toman el relevo los códigos de [degradado morado](https://gradiently.design/es/guide/purple-gradient).

- Magenta a ultravioleta: `linear-gradient(135deg, #ff00ff 0%, #b100e8 50%, #6a00f4 100%)`
- Magenta a azul eléctrico: `linear-gradient(135deg, #ff1fd1 0%, #a83cff 50%, #3a5bff 100%)`
- Magenta a cian: `linear-gradient(135deg, #ff00ff 0%, #8f6bff 50%, #00e5ff 100%)`
- Orquídea pastel: `linear-gradient(135deg, #ffd6fb 0%, #f3a6f0 50%, #d68cf5 100%)`

Magentas fríos. Magenta a cian pasa por un pervinca suave en el centro, y por eso nunca se vuelve gris.

## Códigos de magenta intenso y atardecer

Gira hacia el otro lado del círculo y el magenta se calienta: pasa por el rosa intenso hasta el coral y el naranja. Es el look de los gráficos de finales de los ochenta, del synthwave y el vaporwave, y de muchos carteles de festivales de verano. Una parada superior oscura lo convierte en un anochecer. [Colores vaporwave](https://gradiently.design/es/guide/vaporwave-colors) profundiza en ese mundo.

- Magenta a mandarina: `linear-gradient(135deg, #e600e6 0%, #ff2e8a 45%, #ff8a3d 100%)`
- Anochecer magenta: `linear-gradient(180deg, #2a0a4a 0%, #a3007d 45%, #ff3d8b 75%, #ffb36b 100%)`

Magentas cálidos. Deja el naranja como extremo más claro, para que el punto más brillante sea cálido y el más profundo sea magenta.

## Magenta profundo sobre fondos oscuros

El magenta parece más caro cuando brilla desde la oscuridad en lugar de llenar el encuadre. Un fondo vino o ciruela con una sola luz magenta se lee como moda de lujo o como un bar de madrugada; extendido por todo un cartel, el mismo magenta se lee como un folleto de descuentos. Los fondos oscuros además le dan al texto blanco un sitio cómodo.

- Magenta profundo: `linear-gradient(160deg, #1a0012 0%, #5c0045 50%, #a3006f 100%)`
- Brillo magenta sobre negro: `radial-gradient(circle at 70% 30%, #ff3df5 0%, #a1009b 35%, #3d0040 70%, #12000f 100%)`

Magentas oscuros. La versión con brillo es la que debes elegir cuando quieres que el magenta se sienta premium y no estridente.

> **Evita el magenta hacia verde** El verde está justo enfrente del magenta, y una mezcla directa entre ellos pasa por el gris en el centro. Si quieres los dos, haz que se encuentren con un borde duro o deja el verde como un pequeño acento. [Degradados turbios](https://gradiently.design/es/guide/muddy-gradients) muestra por qué.

## Magenta en pantalla frente a magenta impreso

El magenta de pantalla está hecho de luz, mientras que el de imprenta es tinta, uno de los cuatro colores de cuatricromía en CMYK. El magenta de cuatricromía es mucho menos intenso y suele mostrarse en pantalla aproximadamente como `#ec008c`. Así que un degradado magenta que brilla en tu monitor puede verse plano y rosado en un flyer. [RGB vs CMYK](https://gradiently.design/es/guide/rgb-vs-cmyk) explica la diferencia, y [degradados para imprenta](https://gradiently.design/es/guide/print-gradients) trata las pruebas de color.

### Magenta de pantalla

- Hecho de luz roja y azul
- Valor puro `#ff00ff`, extremadamente vivo
- Brilla sobre fondos oscuros
- Funciona para looks neón y eléctricos

### Magenta de imprenta

- Hecho de tinta sobre papel
- Más cerca de `#ec008c`, claramente más apagado
- Los fondos oscuros pueden imprimirse turbios
- Para un neón real, las imprentas ofrecen tintas directas fluorescentes

## Texto sobre un degradado magenta

El magenta es más claro de lo que parece. El texto blanco sobre `#ff00ff` puro solo alcanza un contraste de 3,1 a 1, que vale para titulares grandes pero no para texto pequeño. El negro sobre el mismo magenta alcanza unos 6,7 a 1, pero resulta pesado. En la práctica, pon el texto blanco sobre el extremo más profundo del degradado, u oscurece el magenta detrás de las palabras pequeñas hasta algo como `#a3006f`.

En las webs, el magenta también da un titular en degradado muy llamativo. Resérvalo para tamaños grandes de titular, donde el contraste aguanta, como se explica en [texto con degradado en CSS](https://gradiently.design/es/guide/css-gradient-text).

```css
.headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(90deg, #ff00ff 0%, #6a00f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Un titular de magenta a ultravioleta. Úsalo sobre una página blanca o muy clara: ahí el magenta alcanza unos 3,1 a 1 y el ultravioleta unos 7 a 1, mientras que el extremo violeta casi desaparece sobre negro.

Una story vertical con un fondo magenta y violeta intenso y las palabras Puertas a las diez en blanco

Una story de noche de club con un Mark magenta. Las palabras quedan sobre la zona más oscura, donde el texto blanco está cómodo.

Los colores estridentes son justo donde más ayuda un fondo que responde a tus palabras. En Gradiently, un Mark magenta oscurece el color cerca de las letras y mantiene su zona más tranquila detrás del titular, así que el brillo se queda y las palabras se siguen leyendo. Para el hermano más frío del magenta, consulta los códigos de [degradado cian](https://gradiently.design/es/guide/cyan-gradient).

## FAQ

### ¿Cuál es el código hex del magenta?

En pantalla, el magenta puro es #ff00ff, que CSS también llama fuchsia. El magenta de imprenta es más apagado y suele mostrarse en pantalla en torno a #ec008c.

### ¿El magenta es rosa o morado?

Ninguno de los dos. Está justo entre el rojo y el azul en el círculo cromático; el rosa intenso tira hacia el rojo y el morado tira hacia el azul.

### ¿Qué colores combinan con un degradado magenta?

El violeta, el azul eléctrico, el cian, el naranja y el casi negro se funden limpiamente con el magenta. Evita mezclarlo directamente con verde, que se vuelve gris.

### ¿Puedo usar texto blanco sobre magenta?

Sobre #ff00ff puro, el blanco alcanza un contraste de 3,1 a 1, así que resérvalo para titulares grandes. Usa un magenta más profundo detrás del texto blanco más pequeño.

### ¿Por qué mi magenta se ve apagado al imprimirlo?

Las tintas de imprenta no pueden reproducir la intensidad del magenta de pantalla. Cuenta con un color más suave, pide una prueba o pregunta a tu imprenta por la tinta rosa fluorescente.