RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind gray-50

Tailwind gray-50 is oklch(98.5% 0.002 247.839) in Tailwind CSS 4.3.3, which is #f9fafb in hex and rgb(249 250 251). Black text on it reaches 20.10:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#f9fafbgray-50
From the theme file of Tailwind CSS 4.3.3 (--color-gray-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.5% 0.002 247.839)
Hex#f9fafb
RGBrgb(249 250 251)
HSLhsl(210 20% 98%)
CSS variablevar(--color-gray-50)
Nearest CSS namesnow #fffafa, 0.008 away in OKLab
White text1.05:1: AA fails, AAA fails, large text fails
Black text20.10:1: AA passes, AAA passes, large text passes

About gray-50

Tailwind gray-50 is a pale gray: OKLCH lightness 98.5%, chroma 0.002, hue 247.8 degrees. It opens the gray scale as its lightest shade, 1.8 points of lightness above gray-100.

HSL and OKLCH agree on how light it is, 98% and 98.5%. Its value fits inside sRGB, so #f9fafb is the same color, not an approximation.

Black text on gray-50 measures 20.10:1, past the 7:1 of WCAG AAA, while white text manages only 1.05:1. Black text passes on every gray shade from gray-50 to gray-400, 4 shades darker than gray-50.

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

Tints and shades

  1. #fefefe
  2. #fefdfd
  3. #fdfcfc
  4. #fcfbfc
  5. #fcfafb
  6. #f9fafb
  7. #c5c4c4
  8. #929191
  9. #616161
  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. #f9fafb
  2. #6b5a28
  3. #d4beee
  4. #271313
  5. #828aaf

Recolor's generator, with gray-50 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #6b5a28, #d4beee, #271313, #828aaf. Open it in Recolor.

Using gray-50

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

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

Common questions

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

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

Is Tailwind gray-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-gray-50: oklch(98.5% 0.002 247.839); #f9fafb is its conversion to sRGB.

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

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

Sources