RecolorOpen Recolor

A vivid medium violet, white text passes AA

Tailwind violet-600

Tailwind violet-600 is oklch(54.1% 0.281 293.009) in Tailwind CSS 4.3.3, which is #7f22fe in hex and rgb(127 34 254). White text on it reaches 5.89:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#7f22feviolet-600
From the theme file of Tailwind CSS 4.3.3 (--color-violet-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(54.1% 0.281 293.009)
Hex#7f22fe
RGBrgb(127 34 254)
HSLhsl(265 99% 56%)
CSS variablevar(--color-violet-600)
Nearest CSS nameblueviolet #8a2be2, 0.050 away in OKLab
White text5.89:1: AA passes, AAA fails, large text passes
Black text3.56:1: AA fails, AAA fails, large text passes

About violet-600

Tailwind violet-600 is a vivid medium violet: OKLCH lightness 54.1%, chroma 0.281, hue 293.0 degrees. On Tailwind's violet scale it sits between violet-500 at 60.6% and violet-700 at 49.1%.

HSL and OKLCH agree on how light it is, 56% and 54.1%. Its value fits inside sRGB, so #7f22fe is the same color, not an approximation.

White text on violet-600 reaches 5.89:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 3.56:1. It is the lightest violet shade that carries white body text; violet-500 falls short at 4.40:1.

The nearest CSS named color, blueviolet (#8a2be2), is 0.050 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #e6e1ff
  2. #cec2ff
  3. #b8a2ff
  4. #a381ff
  5. #905bff
  6. #7f22fe
  7. #6218c7
  8. #470f93
  9. #2d0763
  10. #160236
  11. #03000f

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. #7f22fe
  2. #212318
  3. #dae0b0
  4. #4d4176
  5. #c6b8f2

Recolor's generator, with violet-600 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #212318, #dae0b0, #4d4176, #c6b8f2. Open it in Recolor.

Using violet-600

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

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

Common questions

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

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

Is Tailwind violet-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-600: oklch(54.1% 0.281 293.009); #7f22fe is its conversion to sRGB.

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

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

Sources