Magenta color guide

#FF00FF
HEX
#FF00FF
RGB
rgb(255, 0, 255)
HSL
hsl(300, 100%, 50%)
CMYK
cmyk(0%, 100%, 0%, 0%)

A printing primary, and it looks like one — maximum saturation, hard to place, and it vibrates against green.

Best for
Print production and deliberate maximalism.

Accessibility

Magenta text on whiteAA Large
Sample3.14:1
White text on magentaAA Large
Sample3.14:1
Magenta text on blackAA
Sample6.7:1
Black text on magentaAA
Sample6.7:1

Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.

Colors that go with magenta

Combinations that hold up in a real layout rather than only on the colour wheel.

Magenta color harmonies

Complementary
The opposite hue — highest contrast, best used sparingly.
#FF00FF #00FF00
Analogous
Neighbouring hues that sit together calmly.
#8000FF #FF00FF #FF0080
Triadic
Three evenly spaced hues — vivid but balanced.
#FF00FF #FFFF00 #00FFFF
Split complementary
Softer than complementary, with the same tension.
#FF00FF #80FF00 #00FF80

Magenta shades and tints

The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.

#FFE5FF#FFB3FF#FF80FF#FF4DFF#FF1AFF#E600E6#B300B3#800080#4D004D#290029

Magenta FAQ

What is the hex code for magenta?

Magenta is #FF00FF. In other formats that is rgb(255, 0, 255), hsl(300, 100%, 50%), and approximately cmyk(0%, 100%, 0%, 0%) for print.

What colors go with magenta?

Black, White, Charcoal all pair well with magenta. Print production and deliberate maximalism.

Is magenta accessible for text?

Not on white: magenta reaches only 3.14:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.

Should text on magenta be black or white?

Use black text. It gives the higher contrast ratio of the two against #FF00FF.

More pink colors