14 Different Shades of Magenta (+ HEX codes)

Explore all shades of magenta, from lighter to darker shades. See HEX codes, shade names, and magenta color palettes. Click any shade to copy its HEX code.

Magenta does not exist in the spectrum — the eye invents it where red and violet meet — and it behaves accordingly: synthetic, loud, unmistakably digital.

It is a printing primary, so it reproduces beautifully. Keep it to accents unless the brand is genuinely this confident.

tutu
#ffebff
pink lace
#ffd2ff
lavender rose
#ffa1ff
blush pink
#ff89ff
pink flamingo
#ff58ff
magenta / fuchsia
#ff27ff
purple pizzazz
#dd00dd
hollywood cerise
#c400c4
flirt
#ac00ac
fresh eggplant
#7b007b
pompadour
#630063
blackberry
#4a004a
barossa
#320032
toledo
#1a0019

Magenta: HEX & RGB Codes

magenta has the following primary color codes:

HEX: #ffebff
RGB: (255, 235, 255).

Explore a wide range of magenta shades using our interactive color picker. Click any color to copy its HEX code and use it in your project!

Explore tints of magenta

Tutu
#ffebff
Tutu
#ffebff
Tutu
#fff0ff
Tutu
#fff0ff
Tutu
#fff5ff
Tutu
#fff5ff
Tutu
#fff5ff
Tutu
#fffaff
Tutu
#fffaff
White
#ffffff

Explore shades of magenta

Loulou
#340934
Wine Berry
#4c154c
Finn
#652565
Plum
#813b81
Strikemaster
#9b559b
Bouquet
#b474b4
Lilac
#cc94cc
Melanie
#e5bde5

magenta in HEX, RGB, HSL and CMYK

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

Tints and shades of magenta

Tints add white and shades add black, keeping the hue. Use them for hover states, borders and backgrounds that still belong to the same colour.

Tints (lighter)

#ff27ff
#ff4eff
#ff75ff
#ff9cff
#ffc4ff
#ffebff

Shades (darker)

#d800d8
#b100b1
#8a008a
#630063
#3b003b
#140014

Colours that work with magenta

Complementary

#FF00FF #00ff00

Opposite on the colour wheel. Maximum contrast — use it for accents, not for half the page.

Analogous

#7f00ff #FF00FF #ff0080

Neighbours on the wheel. Calm and cohesive, the safest way to build a palette.

Triadic

#FF00FF #ffff00 #00ffff

Three colours evenly spaced. Lively and balanced; let one dominate.

Text on magenta

Example Primary text

White text on magenta3.14:1Large text only

Example Primary text

Near-black text on magenta5.66:1AA

Measured against WCAG: 4.5:1 for body text, 3:1 for large text. Test your own pair in the Contrast Checker

magenta shade chart

Shade chart showing five steps of magenta, from light tint to deep shade

Right-click to save the chart, or copy the individual codes above.