Magenta color: code #FF00FF

Magenta

#FF00FF

Color codes

  • 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)

About the color Magenta

Magenta has the HEX code #FF00FF, which corresponds to rgb(255, 0, 255) in the RGB model. On the color wheel its hue sits at 300°, with 100% saturation and 50% lightness (hsl(300, 100%, 50%)).

Because of its hue it reads as a cool color: it tends to feel calm and distant, and it visually “recedes” in a composition.

As a background it calls for dark text: black reaches a 6.69:1 contrast ratio on it, versus 3.13:1 for white.

For print, the approximate conversion is cmyk(0%, 100%, 0%, 0%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Magenta

Complementary

#FF00FF · #00FF00

Analogous

#8000FF · #FF00FF · #FF0080

Triadic

#FF00FF · #FFFF00 · #00FFFF

Tetradic

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

Split-complementary

#FF00FF · #80FF00 · #00FF80

Monochromatic

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

Magenta with white and black text

White text Aa Bb Cc 123
3.13:1 · large text only
Black text Aa Bb Cc 123
6.69:1 · AA

Test other pairs in the contrast checker

A color that isn’t in the rainbow

Magenta (#FF00FF, rgb(255, 0, 255)) has a physical quirk: no single wavelength of light produces it. It is called a non-spectral color because it appears when the eye receives light from opposite ends of the spectrum at once, red and blue, without the green in between. On screen that is exactly what happens: red and blue at full, green at zero.

Magenta vs. fuchsia, and print magenta

In CSS, magenta and fuchsia are the same value, #FF00FF; only the name differs. Off screen, usage varies: in fashion, “fuchsia” often means a vibrant purplish pink, and “magenta” can be cooler or darker depending on the brand.

The bigger confusion is with print magenta. The M in CMYK is a process ink with a hue closer to a strong pink, quite different from on-screen #FF00FF. When you convert RGB magenta to CMYK, the printed result is visibly less electric because that shade lies outside the gamut inks can reproduce. If a project relies on that glow, warn the client or consider a spot ink. The RGB vs. CMYK guide explains why in detail.

Uses and associations

Magenta usually reads as bold, creative, pop and unconventional. It shows up in tech, entertainment, music and fashion brands looking to break away from corporate blues. In interfaces it is too strong for large areas but excellent for drawing attention to a single element: a badge, a notification, a highlighted data point in a chart. In interiors it works in small doses, such as an armchair or an art print. These readings are contextual: the same shade can feel festive for a cosmetics brand and out of place for a bank.

Pair it with black (#000000) for maximum impact; with turquoise (#40E0D0) for an ’80s palette; with yellow (#FFFF00) for a pop-art look; and with charcoal gray (#36454F) to balance it with restraint.

Tip: text and dark mode

White text on #FF00FF has a 3.1:1 contrast ratio, acceptable only for large headings. For buttons with small labels, darken it to something like #A300A3 (6.8:1). In dark mode, pure magenta already reaches nearly 6:1 on #121212, but it can vibrate; pulling the saturation down a little is easier on the eyes. Test it in the contrast checker.

How to use it in CSS

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

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

Similar colors

Use Magenta in our tools