RecolorOpen Recolor

A vivid dark purple, white text passes AA

Tailwind violet-900

Tailwind violet-900 is oklch(38% 0.189 293.745) in Tailwind CSS 4.3.3, which is #4d179a in hex and rgb(77 23 154). White text on it reaches 11.03:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#4d179aviolet-900
From the theme file of Tailwind CSS 4.3.3 (--color-violet-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(38% 0.189 293.745)
Hex#4d179a
RGBrgb(77 23 154)
HSLhsl(265 74% 35%)
CSS variablevar(--color-violet-900)
Nearest CSS nameindigo #4b0082, 0.050 away in OKLab
White text11.03:1: AA passes, AAA passes, large text passes
Black text1.90:1: AA fails, AAA fails, large text fails

About violet-900

Tailwind violet-900 is a vivid dark purple: OKLCH lightness 38.0%, chroma 0.189, hue 293.7 degrees. On Tailwind's violet scale it sits between violet-800 at 43.2% and violet-950 at 28.3%.

Here HSL's lightness, 35%, lands near OKLCH's 38.0%, which is not true of every color. Its value fits inside sRGB, so #4d179a is the same color, not an approximation.

White text on violet-900 measures 11.03:1, past the 7:1 of WCAG AAA, while black text manages only 1.90:1. On the violet scale white text works from violet-600 to violet-950; violet-900 has 3 shades of margin.

The closest CSS named color is indigo (#4b0082), 0.050 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #ddd9f0
  2. #bdb5e1
  3. #9e90d1
  4. #816cbf
  5. #6546ad
  6. #4d179a
  7. #3a0f78
  8. #290857
  9. #180439
  10. #09011d
  11. #010005

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. #4d179a
  2. #c5c6ad
  3. #2a2833
  4. #918f39
  5. #ded4ff

Recolor's generator, with violet-900 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #c5c6ad, #2a2833, #918f39, #ded4ff. Open it in Recolor.

Using violet-900

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

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

Common questions

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

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

Is Tailwind violet-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-900: oklch(38% 0.189 293.745); #4d179a is its conversion to sRGB.

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

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

Sources