RecolorOpen Recolor

A vivid medium violet, black text passes AA

Tailwind violet-500

The hex code of Tailwind violet-500 is #8e51ff (rgb(142 81 255)), from its Tailwind CSS 4.3.3 value oklch(60.6% 0.25 292.717). Black text on it reaches 4.77:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#8e51ffviolet-500
From the theme file of Tailwind CSS 4.3.3 (--color-violet-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(60.6% 0.25 292.717)
Hex#8e51ff, the nearest color in sRGB
RGBrgb(142 81 255)
HSLhsl(261 100% 66%)
OKLCH of the hexoklch(60.1% 0.242 293.9)
CSS variablevar(--color-violet-500)
Nearest CSS namemediumslateblue #7b68ee, 0.058 away in OKLab
White text4.40:1: AA fails, AAA fails, large text passes
Black text4.77:1: AA passes, AAA fails, large text passes

About violet-500

Read as numbers, violet-500 is lightness 60.6%, chroma 0.250 and hue 292.7 degrees; read by eye, it is a vivid medium violet. Its neighbors on the violet scale are violet-400, 9.6 points lighter, and violet-600, 6.5 points darker.

Here HSL's lightness, 66%, lands near OKLCH's 60.6%, which is not true of every color. A hex code cannot hold violet-500 exactly: the value is outside sRGB, and #8e51ff is the CSS Color 4 gamut mapping of it, chroma lowered by 0.008, 0.5 points of lightness and 1.2 degrees of hue away from the value.

Black is the ink for violet-500: 4.77:1 passes AA for body text, where white stops at 4.40:1. Black text holds AA down to here on the violet scale; at violet-600 it falls to 3.56:1.

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

Tints and shades

  1. #eae4ff
  2. #d5caff
  3. #c2aeff
  4. #af92ff
  5. #9e74ff
  6. #8e51ff
  7. #6e3ec8
  8. #502b94
  9. #341a63
  10. #190a36
  11. #04010f

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. #8e51ff
  2. #f8efff
  3. #5d4e88
  4. #ceb3a0
  5. #372418

Around violet-500 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #f8efff, #5d4e88, #ceb3a0, #372418, drawn from a seed fixed by its hex. Open it in Recolor.

Using violet-500

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

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

Common questions

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

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

Is Tailwind violet-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-500: oklch(60.6% 0.25 292.717); #8e51ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is mediumslateblue (#7b68ee), 0.058 away in OKLab.

Sources