Magenta Color

About magenta

#FF00FF is the CSS named color magenta; fuchsia is another name for exactly the same value. It is made of red and blue light at full intensity with no green.

Magenta has no single wavelength in the rainbow — the eye perceives it when red and blue light are mixed. In print, magenta is one of the four process inks, but printed process magenta is noticeably pinker and less intense than #FF00FF on screen.

#FF00FF is the value of the CSS named color magenta, defined in the CSS Color specification and identical in every browser.

Other colors called magenta

• Dark magenta (CSS) #8B008BA deep, darker magenta.Copy

Magenta shades and tints

Shades mix magenta with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with magenta

Color harmonies based on the hue of #FF00FF: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Magenta contrast and readability

On a magenta background, black text reads best (6.69:1). Here is how magenta works as a text color:

Magenta is loud: use it for small accents, highlights or bold campaigns. Black text on magenta is more readable than white for small sizes; check the ratios below.

Using magenta in CSS and HTML

:root {
  --color-magenta: #FF00FF;
}

.highlight {
  background-color: var(--color-magenta);
}

.banner {
  background-color: magenta;
  color: #000000;
}

.label {
  color: #FF00FF;
  border: 2px solid rgb(255, 0, 255);
}

<p style="background-color: #FF00FF; color: #000000;">
  Magenta background
</p>