RecolorOpen Recolor

A vivid dark purple, white text passes AA

Tailwind purple-800

Tailwind purple-800 is oklch(43.8% 0.218 303.724) in Tailwind CSS 4.3.3, which is #6e11b0 in hex and rgb(110 17 176). White text on it reaches 8.86:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#6e11b0purple-800
From the theme file of Tailwind CSS 4.3.3 (--color-purple-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(43.8% 0.218 303.724)
Hex#6e11b0
RGBrgb(110 17 176)
HSLhsl(275 82% 38%)
CSS variablevar(--color-purple-800)
Nearest CSS namerebeccapurple #663399, 0.058 away in OKLab
White text8.86:1: AA passes, AAA passes, large text passes
Black text2.37:1: AA fails, AAA fails, large text fails

About purple-800

Tailwind purple-800 is a vivid dark purple: OKLCH lightness 43.8%, chroma 0.218, hue 303.7 degrees. On Tailwind's purple scale it sits between purple-700 at 49.6% and purple-900 at 38.1%.

Here HSL's lightness, 38%, lands near OKLCH's 43.8%, which is not true of every color. Its value fits inside sRGB, so #6e11b0 is the same color, not an approximation.

White text on purple-800 measures 8.86:1, past the 7:1 of WCAG AAA, while black text manages only 2.37:1. On the purple scale white text works from purple-600 to purple-950; purple-800 has 2 shades of margin.

No CSS keyword matches it; rebeccapurple (#663399) is the nearest, 0.058 away in OKLab, a clear step off.

Tints and shades

  1. #e5dbf4
  2. #ccb7e9
  3. #b393dc
  4. #9b6fce
  5. #8448c0
  6. #6e11b0
  7. #550b89
  8. #3d0564
  9. #260242
  10. #110122
  11. #020007

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

  1. #6e11b0
  2. #cbbcef
  3. #261d31
  4. #9d7cd6
  5. #e6def0

Recolor's generator, with purple-800 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #cbbcef, #261d31, #9d7cd6, #e6def0. Open it in Recolor.

Using purple-800

Pair it with text-white, 8.86:1; purple-800 as text on a white page measures the same ratio. In CSS it is var(--color-purple-800).

HTML
<a class="bg-purple-800 text-white" href="/start">Get started</a>
<p class="text-purple-800">Text in purple-800</p>

Common questions

Does white text pass WCAG AA on Tailwind purple-800?

Yes. White text measures 8.86:1 on purple-800, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind purple-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-800: oklch(43.8% 0.218 303.724); #6e11b0 is its conversion to sRGB.

Is there a CSS named color for Tailwind purple-800?

No. The nearest CSS named color is rebeccapurple (#663399), 0.058 away in OKLab.

Sources