Color Magenta: código #FF00FF

Magenta

#FF00FF

Códigos del color

  • HEX#FF00FF
  • RGBrgb(255, 0, 255)
  • HSLhsl(300, 100%, 50%)
  • HSVhsv(300, 100%, 100%)
  • CMYKcmyk(0%, 100%, 0%, 0%)
  • LABlab(60.3% 98.2 -60.8)
  • OKLCHoklch(70.2% 0.323 328.4)

Sobre el color Magenta

Magenta tiene el código HEX #FF00FF, que corresponde a rgb(255, 0, 255) en el modelo RGB. En el círculo cromático, su tono está en 300°, con 100% de saturación y 50% de luminosidad (hsl(300, 100%, 50%)).

Por su tono se percibe como un color frío: suele transmitir calma y distancia y «retrocede» visualmente en la composición.

Como fondo pide texto oscuro: el negro alcanza un contraste de 6,69:1 sobre él, frente a 3,13:1 del blanco.

Para impresión, la conversión aproximada es cmyk(0%, 100%, 0%, 0%). Confírmala siempre con el perfil de color de la imprenta, porque el resultado depende del papel y la tinta.

Tonos más claros

Tonos más oscuros

Combinaciones con Magenta

Complementaria

#FF00FF · #00FF00

Análoga

#8000FF · #FF00FF · #FF0080

Tríada

#FF00FF · #FFFF00 · #00FFFF

Tetrádica

#FF00FF · #FF8000 · #00FF00 · #0080FF

Complementaria dividida

#FF00FF · #80FF00 · #00FF80

Monocromática

#800080 · #CC00CC · #FF00FF · #FF4DFF · #FF99FF

Magenta con texto blanco y negro

Texto blanco Aa Bb Cc 123
3,13:1 · solo texto grande
Texto negro Aa Bb Cc 123
6,69:1 · AA

Prueba otras combinaciones en el verificador de contraste

Un color que no está en el arcoíris

El magenta (#FF00FF, rgb(255, 0, 255)) tiene una particularidad física: no hay una sola longitud de onda de luz que lo produzca. Se le llama color no espectral porque aparece cuando el ojo recibe a la vez luz de los extremos opuestos del espectro, rojo y azul, sin el verde intermedio. En pantalla ocurre exactamente eso: rojo y azul al máximo, verde en cero.

Magenta vs. fucsia, y el magenta de imprenta

En CSS, magenta y fuchsia son el mismo valor, #FF00FF; solo cambia el nombre. Fuera de la pantalla, el uso varía: en moda, “fucsia” suele designar un rosa morado vibrante, y “magenta” puede ser más frío o más oscuro según la marca.

La confusión mayor es con el magenta de imprenta. La M de CMYK es una tinta de proceso con un tono más cercano a un rosa intenso, muy distinto del #FF00FF de pantalla. Al convertir el magenta RGB a CMYK, el impreso resulta visiblemente menos eléctrico, porque ese tono queda fuera de la gama que las tintas pueden reproducir. Si el proyecto depende de ese brillo, avísale al cliente o valora una tinta directa. La guía RGB vs. CMYK explica el porqué en detalle.

Usos y asociaciones

El magenta suele leerse como audaz, creativo, pop y poco convencional. Aparece en marcas de tecnología, entretenimiento, música y moda que quieren alejarse de los azules corporativos. En interfaces es demasiado fuerte para áreas grandes, pero excelente para llamar la atención sobre un único elemento: una insignia, una notificación, un dato destacado en un gráfico. En decoración funciona en dosis pequeñas, como un sillón o un cuadro. Estas lecturas dependen del contexto: el mismo tono puede resultar festivo en una marca de cosmética y fuera de lugar en un banco.

Combínalo con negro (#000000) para un impacto máximo; con turquesa (#40E0D0) para una paleta ochentera; con amarillo (#FFFF00) para un aire pop art; y con gris marengo (#36454F) para equilibrarlo con sobriedad.

Consejo: texto y modo oscuro

El texto blanco sobre #FF00FF tiene un contraste de 3,1:1, aceptable solo para títulos grandes. Para botones con texto pequeño, oscurécelo hasta algo como #A300A3 (6,8:1). En modo oscuro, el magenta puro ya alcanza casi 6:1 sobre #121212, pero puede vibrar demasiado; bajar un poco la saturación cansa menos la vista. Pruébalo en el verificador de contraste.

Cómo usarlo en CSS

:root {
  --color-magenta: #FF00FF;
  --color-magenta-rgb: 255, 0, 255;
}

.elemento {
  background-color: var(--color-magenta);
  color: #000000;
}