RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind mauve-50

In Tailwind CSS 4.3.3, mauve-50 is defined as oklch(98.5% 0 none); in hex that is #fafafa, or rgb(250 250 250). Black text on it reaches 20.12:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fafafamauve-50
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.5% 0 none)
Hex#fafafa
RGBrgb(250 250 250)
HSLhsl(0 0% 98%)
CSS variablevar(--color-mauve-50)
Nearest CSS namesnow #fffafa, 0.007 away in OKLab
White text1.04:1: AA fails, AAA fails, large text fails
Black text20.12:1: AA passes, AAA passes, large text passes

About mauve-50

In OKLCH, mauve-50 has a lightness of 98.5%, a chroma of 0.000 and no hue, which makes it a pale gray. It opens the mauve scale as its lightest shade, 2.5 points of lightness above mauve-100.

HSL and OKLCH agree on how light it is, 98% and 98.5%. The value lies inside sRGB, the gamut of a hex code, so mauve-50 converts to #fafafa without losing chroma.

For text, mauve-50 wants black: 20.12:1 clears even AAA's 7:1, and white at 1.04:1 fails AA. Black text passes on every mauve shade from mauve-50 to mauve-400, 4 shades darker than mauve-50.

Its nearest CSS named color, snow (#fffafa), is 0.007 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fefefe
  2. #fdfdfd
  3. #fcfcfc
  4. #fbfbfb
  5. #fafafa
  6. #c4c4c4
  7. #919191
  8. #616161
  9. #353535
  10. #0e0e0e

From light to dark: 4 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. #fafafa
  2. #997d57
  3. #302732
  4. #83ced5
  5. #564460

Locked as the first of five swatches, mauve-50 gets #997d57, #302732, #83ced5, #564460 from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using mauve-50

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

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

Common questions

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

No. White text measures 1.04:1 on mauve-50, under AA's 4.5:1; black text measures 20.12:1 and passes. The lightest mauve shade for white text is mauve-500.

Is Tailwind mauve-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-50: oklch(98.5% 0 none); #fafafa is its conversion to sRGB.

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

Yes, nearly: snow (#fffafa) is 0.007 away in OKLab, too close to tell apart by eye.

Sources