RecolorOpen Recolor

A vivid medium violet, black text passes AA

Tailwind violet-400

In Tailwind CSS 4.3.3, violet-400 is defined as oklch(70.2% 0.183 293.541); as the nearest sRGB hex that is #a684ff, or rgb(166 132 255). Black text on it reaches 7.37:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#a684ffviolet-400
From the theme file of Tailwind CSS 4.3.3 (--color-violet-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.2% 0.183 293.541)
Hex#a684ff, the nearest color in sRGB
RGBrgb(166 132 255)
HSLhsl(257 100% 76%)
OKLCH of the hexoklch(69.9% 0.176 294.1)
CSS variablevar(--color-violet-400)
Nearest CSS namemediumpurple #9370db, 0.075 away in OKLab
White text2.85:1: AA fails, AAA fails, large text fails
Black text7.37:1: AA passes, AAA passes, large text passes

About violet-400

In OKLCH, violet-400 has a lightness of 70.2%, a chroma of 0.183 and a hue of 293.5 degrees, which makes it a vivid medium violet. The step up to violet-300 is 10.9 points of lightness, and the step down to violet-500 9.6 points.

HSL and OKLCH agree on how light it is, 76% and 70.2%. Violet-400 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #a684ff, gives up 0.007 of chroma and moves 0.3 points of lightness and 0.6 degrees of hue; a Display P3 screen shows the full value.

For text, violet-400 wants black: 7.37:1 clears even AAA's 7:1, and white at 2.85:1 fails AA. Black text passes on every violet shade from violet-50 to violet-500, 1 shade darker than violet-400.

The nearest CSS named color, mediumpurple (#9370db), is 0.075 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #efebff
  2. #dfd7ff
  3. #d0c3ff
  4. #c2afff
  5. #b49aff
  6. #a684ff
  7. #8166c8
  8. #5e4a94
  9. #3e2f63
  10. #201736
  11. #06040f

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. #a684ff
  2. #1d2549
  3. #c6b0ff
  4. #654577
  5. #ffe1ff

Locked as the first of five swatches, violet-400 gets #1d2549, #c6b0ff, #654577, #ffe1ff from Recolor's generator, an analogous palette, hues next to each other on the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using violet-400

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

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

Common questions

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

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

Is Tailwind violet-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-400: oklch(70.2% 0.183 293.541); #a684ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is mediumpurple (#9370db), 0.075 away in OKLab.

Sources