A vivid medium magenta, black text passes AA
What color is magenta?
magenta is a vivid medium magenta: #ff00ff in hex, rgb(255 0 255). Black text on it reaches 6.70:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.
Last updated
| Format | Value |
|---|---|
| Keyword | magenta, the same as fuchsia |
| Hex | #ff00ff |
| RGB | rgb(255 0 255) |
| HSL | hsl(300 100% 50%) |
| OKLCH | oklch(70.2% 0.322 328.4) |
| Nearest Tailwind color | fuchsia-500 #e12afb, 0.056 away in OKLab |
| White text | 3.14:1: AA fails, AAA fails, large text passes |
| Black text | 6.70:1: AA passes, AAA fails, large text passes |
About magenta
Measured in OKLCH, magenta comes out at lightness 70.2%, chroma 0.322 and hue 328.4 degrees: a vivid medium magenta. magenta and fuchsia are two names for one color, #ff00ff.
HSL puts its lightness at 50% and OKLCH at 70.2%, 20 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. No CSS named color comes near it: the closest, orchid (#da70d6), is 0.141 away in OKLab.
Black is the ink for magenta: 6.70:1 passes AA for body text, where white stops at 3.14:1. In the hue-sorted table of named colors it sits between fuchsia and mediumorchid.
In Tailwind CSS 4.3.3 the nearest default color is fuchsia-500 (#e12afb), 0.056 away in OKLab; for the exact color, an arbitrary value such as bg-[#ff00ff] works.
Tints and shades
- #ffe2ff
- #ffc5ff
- #ffa6ff
- #ff84ff
- #ff5bff
- #ff00ff
- #c800c8
- #940094
- #630063
- #360036
- #0f000f
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #ff00ff
- #271625
- #c4cd95
- #782d71
- #bde5db
Around magenta as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #271625, #c4cd95, #782d71, #bde5db, drawn from a seed fixed by its hex. Open it in Recolor.
Using magenta
As a text color, magenta on a black page gives the same 6.70:1.
.notice {
background-color: magenta; /* #ff00ff */
color: black; /* 6.70:1 */
}Common questions
Does white text pass WCAG AA on magenta?
No. White text measures 3.14:1 on magenta, under AA's 4.5:1; black text measures 6.70:1 and passes.
Can magenta be written in OKLCH?
Yes: oklch(70.2% 0.322 328.4), computed from #ff00ff. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to magenta?
No. The nearest, orchid (#da70d6), is 0.141 away in OKLab, a different color.