RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind stone-200

The hex code of Tailwind stone-200 is #e7e5e4 (rgb(231 229 228)), from its Tailwind CSS 4.3.3 value oklch(92.3% 0.003 48.717). Black text on it reaches 16.73:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#e7e5e4stone-200
From the theme file of Tailwind CSS 4.3.3 (--color-stone-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92.3% 0.003 48.717)
Hex#e7e5e4
RGBrgb(231 229 228)
HSLhsl(20 6% 90%)
CSS variablevar(--color-stone-200)
Nearest CSS namegainsboro #dcdcdc, 0.029 away in OKLab
White text1.26:1: AA fails, AAA fails, large text fails
Black text16.73:1: AA passes, AAA passes, large text passes

About stone-200

Read as numbers, stone-200 is lightness 92.3%, chroma 0.003 and hue 48.7 degrees; read by eye, it is a pale gray. Its neighbors on the stone scale are stone-100, 4.7 points lighter, and stone-300, 5.4 points darker.

Here HSL's lightness, 90%, lands near OKLCH's 92.3%, which is not true of every color. No gamut mapping is needed here: oklch(92.3% 0.003 48.717) sits inside sRGB and #e7e5e4 matches it.

Black on stone-200 reads at 16.73:1, enough for AAA body text; white reaches 1.26:1 and should stay off it. On the stone scale black text works down to stone-400, which leaves stone-200 2 shades of margin.

Of the named colors, gainsboro (#dcdcdc) is the nearest, 0.029 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fbfbfb
  2. #f7f6f6
  3. #f3f2f2
  4. #efedee
  5. #ebe9ea
  6. #e7e5e4
  7. #b5b3b4
  8. #868485
  9. #595858
  10. #302f30
  11. #0c0c0c

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. #e7e5e4
  2. #a36d6d
  3. #2b1718
  4. #83d9d8
  5. #006561

Around stone-200 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #a36d6d, #2b1718, #83d9d8, #006561, drawn from a seed fixed by its hex. Open it in Recolor.

Using stone-200

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

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

Common questions

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

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

Is Tailwind stone-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-stone-200: oklch(92.3% 0.003 48.717); #e7e5e4 is its conversion to sRGB.

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

No. The nearest CSS named color is gainsboro (#dcdcdc), 0.029 away in OKLab.

Sources