RecolorOpen Recolor

A vivid medium violet, black text passes AA

Tailwind purple-500

Tailwind purple-500 is oklch(62.7% 0.265 303.9) in Tailwind CSS 4.3.3, which is #ad46ff as the nearest sRGB hex and rgb(173 70 255). Black text on it reaches 5.10:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ad46ffpurple-500
From the theme file of Tailwind CSS 4.3.3 (--color-purple-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(62.7% 0.265 303.9)
Hex#ad46ff, the nearest color in sRGB
RGBrgb(173 70 255)
HSLhsl(273 100% 64%)
OKLCH of the hexoklch(62.2% 0.259 305.3)
CSS variablevar(--color-purple-500)
Nearest CSS namemediumorchid #ba55d3, 0.079 away in OKLab
White text4.12:1: AA fails, AAA fails, large text passes
Black text5.10:1: AA passes, AAA fails, large text passes

About purple-500

Tailwind purple-500 is a vivid medium violet: OKLCH lightness 62.7%, chroma 0.265, hue 303.9 degrees. On Tailwind's purple scale it sits between purple-400 at 71.4% and purple-600 at 55.8%.

HSL and OKLCH agree on how light it is, 64% and 62.7%. Its value lies outside sRGB, the colors a hex code can name: #ad46ff is what CSS Color 4's gamut mapping makes of it, chroma 0.259 instead of 0.265, moving 0.5 points of lightness and 1.4 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on purple-500 reaches 5.10:1, enough for WCAG AA body text but short of AAA's 7:1; white text gets 4.12:1. It is the darkest purple shade that still carries black body text; purple-600 drops to 3.79:1.

The nearest CSS named color, mediumorchid (#ba55d3), is 0.079 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #f1e3ff
  2. #e3c8ff
  3. #d5abff
  4. #c78dff
  5. #ba6dff
  6. #ad46ff
  7. #8735c8
  8. #632594
  9. #411563
  10. #210736
  11. #06010f

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. #ad46ff
  2. #ebd4ff
  3. #1f1729
  4. #bfa0ed
  5. #604978

Recolor's generator, with purple-500 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #ebd4ff, #1f1729, #bfa0ed, #604978. Open it in Recolor.

Using purple-500

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

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

Common questions

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

No. White text measures 4.12:1 on purple-500, under AA's 4.5:1; black text measures 5.10:1 and passes. The lightest purple shade for white text is purple-600.

Is Tailwind purple-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-500: oklch(62.7% 0.265 303.9); #ad46ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is mediumorchid (#ba55d3), 0.079 away in OKLab.

Sources