Pink family
Magenta color
A light, vivid pink with cool undertones. The reference magenta is #FF00FF, as defined by the CSS named color.
| HEX | #FF00FF | |
|---|---|---|
| RGB | rgb(255, 0, 255) | |
| HSL | hsl(300, 100%, 50%) | |
| HSV | hsv(300, 100%, 100%) | |
| OKLCH | oklch(70.2% 0.322 328.4) | |
| CMYK* | 0, 100, 0, 0 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is magenta?
Magenta is a purplish red named after the Battle of Magenta in 1859, the year a new aniline dye of this colour came out. It is one of the printing primaries (the M in CMYK) and on screens is full red plus full blue, #FF00FF, identical to the CSS keyword fuchsia.
Magenta hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of magenta in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Magenta | #FF00FF | CSS named color | Reference shown on this page |
| Magenta | #C20078 | xkcd Color Survey | Noticeably different · 9% similar |
| Magenta | #FF00FF | Color Names (meodai) | Same color |
Magenta vs Fuchsia
#FF00FF
#FF00FF
Identical in CSS. In print and fashion, magenta is usually the redder, deeper of the two. In numbers: the two are 100% similar (OKLab distance 0.000). See Fuchsia for its own codes.
Colors similar to magenta
The closest named colors to #FF00FF across all three sources, with their similarity in OKLab.
Tints and shades of magenta
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with magenta
Classic color-wheel combinations built on #FF00FF, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Magenta with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a magenta background, black text is the better choice.
Use magenta in CSS
.magenta {
color: #FF00FF;
/* or */ color: rgb(255 0 255);
/* or */ color: hsl(300 100% 50%);
/* or */ color: oklch(70.2% 0.322 328.4);
/* CSS keyword */ color: magenta;
}