RecolorOpen Recolor

A vivid very dark purple, white text passes AA

Tailwind purple-950

The hex code of Tailwind purple-950 is #3c0366 (rgb(60 3 102)), from its Tailwind CSS 4.3.3 value oklch(29.1% 0.149 302.717). White text on it reaches 15.03:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#3c0366purple-950
From the theme file of Tailwind CSS 4.3.3 (--color-purple-950), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(29.1% 0.149 302.717)
Hex#3c0366
RGBrgb(60 3 102)
HSLhsl(275 94% 21%)
CSS variablevar(--color-purple-950)
Nearest CSS nameindigo #4b0082, 0.057 away in OKLab
White text15.03:1: AA passes, AAA passes, large text passes
Black text1.40:1: AA fails, AAA fails, large text fails

About purple-950

Read as numbers, purple-950 is lightness 29.1%, chroma 0.149 and hue 302.7 degrees; read by eye, it is a vivid very dark purple. Purple-950 is the last and darkest of the eleven purple shades, 9.0 points under purple-900.

Its lightness is 21% in HSL and 29.1% in OKLCH, 9 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(29.1% 0.149 302.717) sits inside sRGB and #3c0366 matches it.

White on purple-950 reads at 15.03:1, enough for AAA body text; black reaches 1.40:1 and should stay off it. On the purple scale white text works from purple-600 to purple-950; purple-950 has 4 shades of margin.

No CSS keyword matches it; indigo (#4b0082) is the nearest, 0.057 away in OKLab, a clear step off.

Tints and shades

  1. #dbd4e6
  2. #b8abcd
  3. #9783b4
  4. #775c9a
  5. #583580
  6. #3c0366
  7. #2d024e
  8. #1f0138
  9. #110023
  10. #06000f
  11. #010002

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. #3c0366
  2. #957fbb
  3. #e2dcf0
  4. #685280
  5. #bdb2db

Around purple-950 as swatch 1, Recolor's generator made a monochromatic palette, one hue in five lightnesses: #957fbb, #e2dcf0, #685280, #bdb2db, drawn from a seed fixed by its hex. Open it in Recolor.

Using purple-950

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

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

Common questions

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

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

Is Tailwind purple-950 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-950: oklch(29.1% 0.149 302.717); #3c0366 is its conversion to sRGB.

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

No. The nearest CSS named color is indigo (#4b0082), 0.057 away in OKLab.

Sources