RecolorOpen Recolor

A vivid very dark purple, white text passes AA

Tailwind violet-950

In Tailwind CSS 4.3.3, violet-950 is defined as oklch(28.3% 0.141 291.089); in hex that is #2f0d68, or rgb(47 13 104). White text on it reaches 15.24:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#2f0d68violet-950
From the theme file of Tailwind CSS 4.3.3 (--color-violet-950), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(28.3% 0.141 291.089)
Hex#2f0d68
RGBrgb(47 13 104)
HSLhsl(262 78% 23%)
CSS variablevar(--color-violet-950)
Nearest CSS namemidnightblue #191970, 0.046 away in OKLab
White text15.24:1: AA passes, AAA passes, large text passes
Black text1.38:1: AA fails, AAA fails, large text fails

About violet-950

In OKLCH, violet-950 has a lightness of 28.3%, a chroma of 0.141 and a hue of 291.1 degrees, which makes it a vivid very dark purple. It closes the violet scale as its darkest shade, 9.7 points of lightness below violet-900.

HSL and OKLCH agree on how light it is, 23% and 28.3%. The value lies inside sRGB, the gamut of a hex code, so violet-950 converts to #2f0d68 without losing chroma.

For text, violet-950 wants white: 15.24:1 clears even AAA's 7:1, and black at 1.38:1 fails AA. White text passes on every violet shade from violet-600 down, so violet-950 is 4 shades past the line.

Among the CSS keywords, midnightblue (#191970) comes closest at 0.046 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #d7d5e7
  2. #b1adce
  3. #8d85b5
  4. #6a5f9c
  5. #4b3982
  6. #2f0d68
  7. #230850
  8. #170439
  9. #0c0224
  10. #030010
  11. #000002

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. #2f0d68
  2. #6d78d6
  3. #d9d7ff
  4. #593d6f
  5. #e299e1

Locked as the first of five swatches, violet-950 gets #6d78d6, #d9d7ff, #593d6f, #e299e1 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-950

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

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

Common questions

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

Yes. White text measures 15.24:1 on violet-950, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind violet-950 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-950: oklch(28.3% 0.141 291.089); #2f0d68 is its conversion to sRGB.

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

No. The nearest CSS named color is midnightblue (#191970), 0.046 away in OKLab.

Sources