Magenta #FF00FF

Magenta, hex #FF00FF, is a vivid purplish pink made by mixing full red and full blue light with no green. On screens it is extremely saturated and bright, sitting between pink and purple. Printer ink, neon signs, orchids and deliberately artificial-looking design are its natural territory.

In CSS and HTML, magenta and fuchsia are the same color, #FF00FF. Process magenta ink used in CMYK printing is a different, pinker shade, so printed magenta will not match the screen value exactly.

Magenta color codes
HEX#FF00FF
RGBrgb(255, 0, 255)
HSLhsl(300, 100%, 50%)
HSVhsv(300, 100%, 100%)
CMYKcmyk(0%, 100%, 0%, 0%)

Text on Magenta

Black text reads better on Magenta. Ratios use the WCAG 2 formula: 4.5:1 passes AA for body text, 3:1 passes for large text.

White text

The quick brown fox jumps over the lazy dog.

3.13:1 · AA large
Black text

The quick brown fox jumps over the lazy dog.

6.69:1 · AA

Colors that go with Magenta

Magenta tints and shades

Tints mix Magenta with white, shades mix it with black, in 15% steps. Copy any code, or open the tint and shade generator for a full scale.

Tints

#FF26FF
#FF4DFF
#FF73FF
#FF99FF
#FFBFFF

Shades

#D900D9
#B300B3
#8C008C
#660066
#400040

Magenta color schemes

Color-wheel harmonies built by rotating the hue of #FF00FF and keeping its saturation and lightness.

Complementary

#FF00FF
#00FF00

Analogous

#8000FF
#FF00FF
#FF0080

Triadic

#FF00FF
#FFFF00
#00FFFF

Split complementary

#FF00FF
#80FF00
#00FF80

Tetradic

#FF00FF
#FF8000
#00FF00
#0080FF

Magenta color meaning

Magenta has an unusual place in color science. No single wavelength of light looks magenta; the eye sees it when red and blue light arrive together. That is why it never appears in a rainbow, even though it fills the gap between red and violet on the color wheel.

The name dates to 1859, when a new aniline dye was renamed after the Battle of Magenta in northern Italy. Today the most familiar magenta is the M in CMYK, one of the four process inks in color printing.

Culturally, magenta reads as unconventional, creative and a little loud. It lacks the long symbolic history of red or purple, so most of its meaning comes from modern uses in printing, technology and pop design.

How to use Magenta in design

Full magenta is very intense on screen, so most interfaces use it for small accents like a highlight, a tag or a single call to action. Black and dark text read well on it, and white text is weak except at large sizes.

It works in gradients with purple, blue or orange for social graphics and music artwork. If you want magenta as a brand color, test a slightly deeper or less saturated version for large areas. For print, choose a CMYK target, since screen magenta and ink magenta differ.

Palettes with Magenta tones

Curated palettes with a color close to #FF00FF.

Colors similar to Magenta

Work with Magenta

Magenta FAQ

What is the difference between magenta and fuchsia?

On screens there is none: CSS defines both magenta and fuchsia as #FF00FF. The names have different origins. Fuchsia comes from the flower, and magenta from a dye named after an 1859 battle. Outside CSS, brands use both names loosely for a range of bright purple-pinks.

Is magenta pink or purple?

Magenta sits between the two. It is made from equal parts red and blue light, so it has both pink and purple qualities. Most people describe #FF00FF as a purplish pink. Lighter versions read more pink, and darker versions look more purple.