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.
| HEX | #FF00FF | |
|---|---|---|
| RGB | rgb(255, 0, 255) | |
| HSL | hsl(300, 100%, 50%) | |
| HSV | hsv(300, 100%, 100%) | |
| CMYK | cmyk(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.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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
Shades
Magenta color schemes
Color-wheel harmonies built by rotating the hue of #FF00FF and keeping its saturation and lightness.
Complementary
Analogous
Triadic
Split complementary
Tetradic
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.