RecolorOpen Recolor

A medium warm gray, white text passes AA

Tailwind stone-500

The hex code of Tailwind stone-500 is #79716b (rgb(121 113 107)), from its Tailwind CSS 4.3.3 value oklch(55.3% 0.013 58.071). White text on it reaches 4.79:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#79716bstone-500
From the theme file of Tailwind CSS 4.3.3 (--color-stone-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.3% 0.013 58.071)
Hex#79716b
RGBrgb(121 113 107)
HSLhsl(26 6% 45%)
CSS variablevar(--color-stone-500)
Nearest CSS namedimgray #696969, 0.036 away in OKLab
White text4.79:1: AA passes, AAA fails, large text passes
Black text4.39:1: AA fails, AAA fails, large text passes

About stone-500

Read as numbers, stone-500 is lightness 55.3%, chroma 0.013 and hue 58.1 degrees; read by eye, it is a medium warm gray. Its neighbors on the stone scale are stone-400, 15.6 points lighter, and stone-600, 10.9 points darker.

HSL calls its lightness 45%, OKLCH 55.3%: 11 points between a formula and a measure of what the eye sees. No gamut mapping is needed here: oklch(55.3% 0.013 58.071) sits inside sRGB and #79716b matches it.

White is the ink for stone-500: 4.79:1 passes AA for body text, where black stops at 4.39:1. It is the lightest stone shade that carries white body text; stone-400 falls short at 2.59:1.

Of the named colors, dimgray (#696969) is the nearest, 0.036 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #e8e6e6
  2. #d1cdce
  3. #bab5b6
  4. #a49d9f
  5. #8f8688
  6. #79716b
  7. #5e5658
  8. #443e3f
  9. #2b2728
  10. #141212
  11. #030203

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. #79716b
  2. #cdecdc
  3. #2f5f54
  4. #6cc9bb
  5. #112b2c

Around stone-500 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #cdecdc, #2f5f54, #6cc9bb, #112b2c, drawn from a seed fixed by its hex. Open it in Recolor.

Using stone-500

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

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

Common questions

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

Yes. White text measures 4.79:1 on stone-500, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind stone-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-stone-500: oklch(55.3% 0.013 58.071); #79716b is its conversion to sRGB.

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

No. The nearest CSS named color is dimgray (#696969), 0.036 away in OKLab.

Sources