A dark purple, white text passes AA
What color is rebeccapurple?
The CSS named color rebeccapurple is #663399, or rgb(102 51 153): a dark purple in plain words. White text on it reaches 8.41:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | rebeccapurple |
| Hex | #663399 |
| RGB | rgb(102 51 153) |
| HSL | hsl(270 50% 40%) |
| OKLCH | oklch(44.0% 0.160 303.4) |
| Nearest Tailwind color | purple-800 #6e11b0, 0.058 away in OKLab |
| White text | 8.41:1: AA passes, AAA passes, large text passes |
| Black text | 2.50:1: AA fails, AAA fails, large text fails |
About rebeccapurple
In OKLCH terms rebeccapurple has a lightness of 44.0%, a chroma of 0.160 and a hue of 303.4 degrees, a dark purple to the eye. It is the one named color CSS Color 4 added to the list of CSS Color 3. The CSS Working Group's call for consensus of June 19, 2014 proposed #663399 under this name as a tribute to the daughter of Eric Meyer, who had recently died; no objection was raised, and it went into CSS Color 4.
Here HSL's lightness, 40%, lands near OKLCH's 44.0%, which is not true of every color. No CSS keyword matches it; darkslateblue (#483d8b) is the nearest, 0.061 away in OKLab, a clear step off.
For text, rebeccapurple wants white: 8.41:1 clears even AAA's 7:1, and black at 2.50:1 fails AA. Its neighbors in the hue-sorted list of names are darkviolet and indigo.
The closest Tailwind 4.3.3 color is purple-800, 0.058 away in OKLab, so bg-purple-800 comes near; bg-[#663399] gives the color itself.
Tints and shades
- #e4dcef
- #c9badf
- #af99ce
- #9678bd
- #7d56ab
- #663399
- #4e2677
- #381957
- #230d38
- #0f041c
- #020105
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
- #663399
- #e3dceb
- #a17ccb
- #072522
- #f1b788
Locked as the first of five swatches, rebeccapurple gets #e3dceb, #a17ccb, #072522, #f1b788 from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.
Using rebeccapurple
As a text color, rebeccapurple on a white page gives the same 8.41:1.
.notice {
background-color: rebeccapurple; /* #663399 */
color: white; /* 8.41:1 */
}Common questions
Does white text pass WCAG AA on rebeccapurple?
Yes. White text measures 8.41:1 on rebeccapurple, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.
Can rebeccapurple be written in OKLCH?
Yes: oklch(44.0% 0.160 303.4), computed from #663399. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to rebeccapurple?
No. The nearest, darkslateblue (#483d8b), is 0.061 away in OKLab, a different color.