RecolorOpen Recolor

A violet-tinted white, black text passes AA

Tailwind purple-50

In Tailwind CSS 4.3.3, purple-50 is defined as oklch(97.7% 0.014 308.299); in hex that is #faf5ff, or rgb(250 245 255). Black text on it reaches 19.57:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#faf5ffpurple-50
From the theme file of Tailwind CSS 4.3.3 (--color-purple-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97.7% 0.014 308.299)
Hex#faf5ff
RGBrgb(250 245 255)
HSLhsl(270 100% 98%)
CSS variablevar(--color-purple-50)
Nearest CSS nameghostwhite #f8f8ff, 0.008 away in OKLab
White text1.07:1: AA fails, AAA fails, large text fails
Black text19.57:1: AA passes, AAA passes, large text passes

About purple-50

In OKLCH, purple-50 has a lightness of 97.7%, a chroma of 0.014 and a hue of 308.3 degrees, which makes it a violet-tinted white. As the first of the eleven purple shades it sits closest to white, 2.3 points below it and 3.1 points above purple-100.

Here HSL's lightness, 98%, lands near OKLCH's 97.7%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so purple-50 converts to #faf5ff without losing chroma.

For text, purple-50 wants black: 19.57:1 clears even AAA's 7:1, and white at 1.07:1 fails AA. On the purple scale black text works down to purple-500, which leaves purple-50 5 shades of margin.

The CSS keyword ghostwhite (#f8f8ff) is almost the same color: 0.008 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffdfe
  2. #fffbfc
  3. #fff9fb
  4. #fff7fa
  5. #fff6f8
  6. #faf5ff
  7. #c9bfc2
  8. #958d8f
  9. #645e60
  10. #363334
  11. #0f0d0e

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. #faf5ff
  2. #4e9080
  3. #002018
  4. #feb0c6
  5. #9f294d

Locked as the first of five swatches, purple-50 gets #4e9080, #002018, #feb0c6, #9f294d from Recolor's generator, a complementary palette, built on the hue opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using purple-50

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

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

Common questions

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

No. White text measures 1.07:1 on purple-50, under AA's 4.5:1; black text measures 19.57:1 and passes. The lightest purple shade for white text is purple-600.

Is Tailwind purple-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-50: oklch(97.7% 0.014 308.299); #faf5ff is its conversion to sRGB.

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

Yes, nearly: ghostwhite (#f8f8ff) is 0.008 away in OKLab, too close to tell apart by eye.

Sources