RecolorOpen Recolor

A vivid medium violet, white text passes AA

Tailwind purple-600

In Tailwind CSS 4.3.3, purple-600 is defined as oklch(55.8% 0.288 302.321); in hex that is #9810fa, or rgb(152 16 250). White text on it reaches 5.54:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#9810fapurple-600
From the theme file of Tailwind CSS 4.3.3 (--color-purple-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.8% 0.288 302.321)
Hex#9810fa
RGBrgb(152 16 250)
HSLhsl(275 96% 52%)
CSS variablevar(--color-purple-600)
Nearest CSS nameblueviolet #8a2be2, 0.045 away in OKLab
White text5.54:1: AA passes, AAA fails, large text passes
Black text3.79:1: AA fails, AAA fails, large text passes

About purple-600

In OKLCH, purple-600 has a lightness of 55.8%, a chroma of 0.288 and a hue of 302.3 degrees, which makes it a vivid medium violet. The step up to purple-500 is 6.9 points of lightness, and the step down to purple-700 6.2 points.

Here HSL's lightness, 52%, lands near OKLCH's 55.8%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so purple-600 converts to #9810fa without losing chroma.

With white text, purple-600 passes AA at 5.54:1. Black text, at 3.79:1, does not. Going down the purple scale, white text first reaches AA here; one shade lighter, purple-500 gives it 4.12:1.

Among the CSS keywords, blueviolet (#8a2be2) comes closest at 0.045 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #ece0ff
  2. #dac0ff
  3. #c99fff
  4. #b87dff
  5. #a755fe
  6. #9810fa
  7. #760ac4
  8. #560591
  9. #380261
  10. #1c0135
  11. #05000e

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. #9810fa
  2. #0d2719
  3. #ecd7ff
  4. #60532a
  5. #dabc65

Locked as the first of five swatches, purple-600 gets #0d2719, #ecd7ff, #60532a, #dabc65 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using purple-600

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

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

Common questions

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

Yes. White text measures 5.54:1 on purple-600, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind purple-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-600: oklch(55.8% 0.288 302.321); #9810fa is its conversion to sRGB.

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

No. The nearest CSS named color is blueviolet (#8a2be2), 0.045 away in OKLab.

Sources