A vivid dark purple, white text passes AA
What color is purple?
The CSS named color purple is #800080, or rgb(128 0 128): a vivid dark purple in plain words. White text on it reaches 9.42:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | purple |
| Hex | #800080 |
| RGB | rgb(128 0 128) |
| HSL | hsl(300 100% 25%) |
| OKLCH | oklch(42.1% 0.193 328.4) |
| Nearest Tailwind color | fuchsia-900 #721378, 0.032 away in OKLab |
| White text | 9.42:1: AA passes, AAA passes, large text passes |
| Black text | 2.23:1: AA fails, AAA fails, large text fails |
About purple
Measured in OKLCH, purple comes out at lightness 42.1%, chroma 0.193 and hue 328.4 degrees: a vivid dark purple. CSS Color 4 counts it among the 16 names that came from the VGA palette and then HTML; most of the other names came from the X11 color system.
Its HSL lightness, 25%, says little about how light purple looks; OKLCH, made to match the eye, measures 42.1%, 17 points away. Of the named colors, darkmagenta (#8b008b) is the nearest, 0.028 away in OKLab; next to each other the two still differ.
White on purple reads at 9.42:1, enough for AAA body text; black reaches 2.23:1 and should stay off it. Its neighbors in the hue-sorted list of names are darkmagenta and pink.
The closest Tailwind 4.3.3 color is fuchsia-900, 0.032 away in OKLab, so bg-fuchsia-900 comes near; bg-[#800080] gives the color itself.
Tints and shades
- #ecd8ea
- #d8b2d5
- #c38cc0
- #ae66ab
- #973e96
- #800080
- #630063
- #480048
- #2e002e
- #160016
- #030003
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
- #800080
- #e1a9d6
- #291b29
- #6c9672
- #f5cfed
Around purple as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #e1a9d6, #291b29, #6c9672, #f5cfed, drawn from a seed fixed by its hex. Open it in Recolor.
Using purple
As a text color, purple on a white page gives the same 9.42:1.
.notice {
background-color: purple; /* #800080 */
color: white; /* 9.42:1 */
}Common questions
Does white text pass WCAG AA on purple?
Yes. White text measures 9.42:1 on purple, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.
Can purple be written in OKLCH?
Yes: oklch(42.1% 0.193 328.4), computed from #800080. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to purple?
Yes: darkmagenta (#8b008b) is the nearest, 0.028 away in OKLab, then rebeccapurple at 0.085.