La versión corta
- 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.
En esta página
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.
#7c3aedTira a
Transmite
#a21cafTira a
Transmite
#ff00ffTira a
Transmite
Hex
#e6007eTira a
Transmite
Hex
#ff4fa3Tira a
Transmite
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 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.
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 profundiza en ese mundo.
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 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 explica la diferencia, y degradados para imprenta 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.
.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;
}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.
Preguntas frecuentes
¿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.
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