RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind stone-100

In Tailwind CSS 4.3.3, stone-100 is defined as oklch(97% 0.001 106.424); in hex that is #f5f5f4, or rgb(245 245 244). Black text on it reaches 19.25:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#f5f5f4stone-100
From the theme file of Tailwind CSS 4.3.3 (--color-stone-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97% 0.001 106.424)
Hex#f5f5f4
RGBrgb(245 245 244)
HSLhsl(60 5% 96%)
CSS variablevar(--color-stone-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.001 away in OKLab
White text1.09:1: AA fails, AAA fails, large text fails
Black text19.25:1: AA passes, AAA passes, large text passes

About stone-100

In OKLCH, stone-100 has a lightness of 97.0%, a chroma of 0.001 and no hue, which makes it a pale gray. The step up to stone-50 is 1.5 points of lightness, and the step down to stone-200 4.7 points.

HSL and OKLCH agree on how light it is, 96% and 97.0%. The value lies inside sRGB, the gamut of a hex code, so stone-100 converts to #f5f5f4 without losing chroma.

For text, stone-100 wants black: 19.25:1 clears even AAA's 7:1, and white at 1.09:1 fails AA. Black text passes on every stone shade from stone-50 to stone-400, 3 shades darker than stone-100.

Its nearest CSS named color, whitesmoke (#f5f5f5), is 0.001 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fdfdfd
  2. #fcfcfc
  3. #fafafa
  4. #f9f8f8
  5. #f7f6f7
  6. #f5f5f4
  7. #c1c0c0
  8. #8e8e8e
  9. #5f5f5f
  10. #343334
  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. #f5f5f4
  2. #6b82ef
  3. #2b1c1a
  4. #fbac96
  5. #3d5843

Locked as the first of five swatches, stone-100 gets #6b82ef, #2b1c1a, #fbac96, #3d5843 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 stone-100

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

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

Common questions

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

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

Is Tailwind stone-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-stone-100: oklch(97% 0.001 106.424); #f5f5f4 is its conversion to sRGB.

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

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

Sources