RecolorOpen Recolor

A vivid dark purple, white text passes AA

Tailwind purple-900

In Tailwind CSS 4.3.3, purple-900 is defined as oklch(38.1% 0.176 304.987); in hex that is #59168b, or rgb(89 22 139). White text on it reaches 10.98:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#59168bpurple-900
From the theme file of Tailwind CSS 4.3.3 (--color-purple-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(38.1% 0.176 304.987)
Hex#59168b
RGBrgb(89 22 139)
HSLhsl(274 73% 32%)
CSS variablevar(--color-purple-900)
Nearest CSS nameindigo #4b0082, 0.042 away in OKLab
White text10.98:1: AA passes, AAA passes, large text passes
Black text1.91:1: AA fails, AAA fails, large text fails

About purple-900

In OKLCH, purple-900 has a lightness of 38.1%, a chroma of 0.176 and a hue of 305.0 degrees, which makes it a vivid dark purple. The step up to purple-800 is 5.7 points of lightness, and the step down to purple-950 9.0 points.

HSL calls its lightness 32%, OKLCH 38.1%: 7 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so purple-900 converts to #59168b without losing chroma.

For text, purple-900 wants white: 10.98:1 clears even AAA's 7:1, and black at 1.91:1 fails AA. White text passes on every purple shade from purple-600 down, so purple-900 is 3 shades past the line.

Among the CSS keywords, indigo (#4b0082) comes closest at 0.042 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #e1d8ed
  2. #c4b3db
  3. #a88ec8
  4. #8c69b4
  5. #7244a0
  6. #59168b
  7. #440f6c
  8. #30084e
  9. #1d0332
  10. #0c0119
  11. #020004

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. #59168b
  2. #cfc0f2
  3. #361423
  4. #599d45
  5. #c4e7fe

Locked as the first of five swatches, purple-900 gets #cfc0f2, #361423, #599d45, #c4e7fe from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using purple-900

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

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

Common questions

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

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

Is Tailwind purple-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-900: oklch(38.1% 0.176 304.987); #59168b is its conversion to sRGB.

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

No. The nearest CSS named color is indigo (#4b0082), 0.042 away in OKLab.

Sources