RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind taupe-50

In Tailwind CSS 4.3.3, taupe-50 is defined as oklch(98.6% 0.002 67.8); in hex that is #fbfaf9, or rgb(251 250 249). Black text on it reaches 20.14:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fbfaf9taupe-50
From the theme file of Tailwind CSS 4.3.3 (--color-taupe-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.6% 0.002 67.8)
Hex#fbfaf9
RGBrgb(251 250 249)
HSLhsl(30 20% 98%)
CSS variablevar(--color-taupe-50)
Nearest CSS namesnow #fffafa, 0.006 away in OKLab
White text1.04:1: AA fails, AAA fails, large text fails
Black text20.14:1: AA passes, AAA passes, large text passes

About taupe-50

In OKLCH, taupe-50 has a lightness of 98.6%, a chroma of 0.002 and a hue of 67.8 degrees, which makes it a pale gray. As the first of the eleven taupe shades it sits closest to white, 1.4 points below it and 2.6 points above taupe-100.

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

For text, taupe-50 wants black: 20.14:1 clears even AAA's 7:1, and white at 1.04:1 fails AA. On the taupe scale black text works down to taupe-400, which leaves taupe-50 4 shades of margin.

The CSS keyword snow (#fffafa) is almost the same color: 0.006 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fefefe
  2. #fefdfd
  3. #fdfcfd
  4. #fdfbfc
  5. #fcfbfb
  6. #fbfaf9
  7. #c5c4c4
  8. #929191
  9. #626161
  10. #353535
  11. #0e0e0e

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. #fbfaf9
  2. #bf6373
  3. #231414
  4. #e5afa1
  5. #813c1d

Locked as the first of five swatches, taupe-50 gets #bf6373, #231414, #e5afa1, #813c1d 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 taupe-50

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

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

Common questions

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

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

Is Tailwind taupe-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-taupe-50: oklch(98.6% 0.002 67.8); #fbfaf9 is its conversion to sRGB.

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

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

Sources