RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind stone-50

Tailwind stone-50 is oklch(98.5% 0.001 106.423) in Tailwind CSS 4.3.3, which is #fafaf9 in hex and rgb(250 250 249). Black text on it reaches 20.11:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#fafaf9stone-50
From the theme file of Tailwind CSS 4.3.3 (--color-stone-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.5% 0.001 106.423)
Hex#fafaf9
RGBrgb(250 250 249)
HSLhsl(60 9% 98%)
CSS variablevar(--color-stone-50)
Nearest CSS namesnow #fffafa, 0.007 away in OKLab
White text1.04:1: AA fails, AAA fails, large text fails
Black text20.11:1: AA passes, AAA passes, large text passes

About stone-50

Tailwind stone-50 is a pale gray: OKLCH lightness 98.5%, chroma 0.001, no hue. As the first of the eleven stone shades it sits closest to white, 1.5 points below it and 1.5 points above stone-100.

Here HSL's lightness, 98%, lands near OKLCH's 98.5%, which is not true of every color. Its value fits inside sRGB, so #fafaf9 is the same color, not an approximation.

Black text on stone-50 measures 20.11:1, past the 7:1 of WCAG AAA, while white text manages only 1.04:1. On the stone scale black text works down to stone-400, which leaves stone-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. #fefdfd
  3. #fdfcfc
  4. #fcfbfc
  5. #fbfafb
  6. #fafaf9
  7. #c5c4c4
  8. #919191
  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. #fafaf9
  2. #3687c0
  3. #052440
  4. #99c8f3
  5. #2a5775

Recolor's generator, with stone-50 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #3687c0, #052440, #99c8f3, #2a5775. Open it in Recolor.

Using stone-50

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

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

Common questions

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

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

Is Tailwind stone-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-stone-50: oklch(98.5% 0.001 106.423); #fafaf9 is its conversion to sRGB.

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

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

Sources