magenta — #FF00FF
#FF00FF
rgb(255, 0, 255) · hsl(300, 100%, 50%) · CSS keyword magenta
Can you put text on it?
| Contrast | Body text | Large text | |
|---|---|---|---|
| magenta on white | 3.14:1 | — | AA |
| magenta on black | 6.7:1 | AA | AA |
As a background, magenta takes black text: 6.7:1 against 3.14:1 the other way. A colour picker will give you the hex and stop there, which is why so many palettes look right and fail an accessibility audit.
Where the name comes from
Named after the Battle of Magenta in 1859, fought the same year the dye was patented. The town is in Lombardy and the connection is purely commercial.
Using it
color: magenta;
color: #ff00ff;
color: rgb(255 0 255);All three are the same colour. The keyword is one of the 141 CSS named colours — a list settled in CSS 2.1 and added to exactly once since, when rebeccapurple was standardised in 2014.
Colours close to magenta
- fuchsia — #FF00FF
- deeppink — #FF1493
- mediumvioletred — #C71585
- darkviolet — #9400D3
- crimson — #DC143C
- darkorchid — #9932CC
Frequently asked questions
What is the hex code for magenta?
The hex code for magenta is #FF00FF — RGB 255, 0, 255.
Can I use magenta for text?
Only for large text. magenta reaches 3.14:1 against white — enough for the 3:1 of headings at 24px or 18.5px bold, short of the 4.5:1 body text needs.
Should text on magenta be black or white?
Black — 6.7:1 against 3.14:1 the other way.
Other named colours
- maroon — #800000
- mediumaquamarine — #66CDAA
- mediumblue — #0000CD
- mediumorchid — #BA55D3
- mediumpurple — #9370DB
- mediumseagreen — #3CB371
- mediumslateblue — #7B68EE
- mediumspringgreen — #00FA9A
- mediumturquoise — #48D1CC
- mediumvioletred — #C71585
- midnightblue — #191970
- mintcream — #F5FFFA
#FF00FF in full — tints, shades and harmonies · All named colours · Colour reference