RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind zinc-50

In Tailwind CSS 4.3.3, zinc-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

#fafafazinc-50
From the theme file of Tailwind CSS 4.3.3 (--color-zinc-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-zinc-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 zinc-50

In OKLCH, zinc-50 has a lightness of 98.5%, a chroma of 0.000 and no hue, which makes it a pale gray. As the first of the eleven zinc shades it sits closest to white, 1.5 points below it and 1.8 points above zinc-100.

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

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

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

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, zinc-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 zinc-50

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

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

Common questions

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

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

Is Tailwind zinc-50 defined in OKLCH?

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

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

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

Sources