RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind gray-100

In Tailwind CSS 4.3.3, gray-100 is defined as oklch(96.7% 0.003 264.542); in hex that is #f3f4f6, or rgb(243 244 246). Black text on it reaches 19.08:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#f3f4f6gray-100
From the theme file of Tailwind CSS 4.3.3 (--color-gray-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.7% 0.003 264.542)
Hex#f3f4f6
RGBrgb(243 244 246)
HSLhsl(220 14% 96%)
CSS variablevar(--color-gray-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.004 away in OKLab
White text1.10:1: AA fails, AAA fails, large text fails
Black text19.08:1: AA passes, AAA passes, large text passes

About gray-100

In OKLCH, gray-100 has a lightness of 96.7%, a chroma of 0.003 and a hue of 264.5 degrees, which makes it a pale gray. The step up to gray-50 is 1.8 points of lightness, and the step down to gray-200 3.9 points.

Here HSL's lightness, 96%, lands near OKLCH's 96.7%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so gray-100 converts to #f3f4f6 without losing chroma.

For text, gray-100 wants black: 19.08:1 clears even AAA's 7:1, and white at 1.10:1 fails AA. On the gray scale black text works down to gray-400, which leaves gray-100 3 shades of margin.

The CSS keyword whitesmoke (#f5f5f5) is almost the same color: 0.004 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fdfdfd
  2. #fcfbfb
  3. #faf9f9
  4. #f9f7f8
  5. #f7f5f6
  6. #f3f4f6
  7. #c1bfbf
  8. #8e8d8d
  9. #5f5e5e
  10. #343333
  11. #0e0d0d

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. #f3f4f6
  2. #71486f
  3. #d2a1ce
  4. #271922
  5. #a07f98

Locked as the first of five swatches, gray-100 gets #71486f, #d2a1ce, #271922, #a07f98 from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using gray-100

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

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

Common questions

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

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

Is Tailwind gray-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-gray-100: oklch(96.7% 0.003 264.542); #f3f4f6 is its conversion to sRGB.

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

Yes, nearly: whitesmoke (#f5f5f5) is 0.004 away in OKLab, too close to tell apart by eye.

Sources