RecolorOpen Recolor

A medium warm gray, black text passes AA

Tailwind stone-400

In Tailwind CSS 4.3.3, stone-400 is defined as oklch(70.9% 0.01 56.259); in hex that is #a6a09b, or rgb(166 160 155). Black text on it reaches 8.12:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#a6a09bstone-400
From the theme file of Tailwind CSS 4.3.3 (--color-stone-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.9% 0.01 56.259)
Hex#a6a09b
RGBrgb(166 160 155)
HSLhsl(27 6% 63%)
CSS variablevar(--color-stone-400)
Nearest CSS namedarkgray #a9a9a9, 0.027 away in OKLab
White text2.59:1: AA fails, AAA fails, large text fails
Black text8.12:1: AA passes, AAA passes, large text passes

About stone-400

In OKLCH, stone-400 has a lightness of 70.9%, a chroma of 0.010 and a hue of 56.3 degrees, which makes it a medium warm gray. The step up to stone-300 is 16.0 points of lightness, and the step down to stone-500 15.6 points.

Its lightness is 63% in HSL and 70.9% in OKLCH, 8 points apart; only the second tracks how light it looks. The value lies inside sRGB, the gamut of a hex code, so stone-400 converts to #a6a09b without losing chroma.

For text, stone-400 wants black: 8.12:1 clears even AAA's 7:1, and white at 2.59:1 fails AA. Black text holds AA down to here on the stone scale; at stone-500 it falls to 4.39:1.

Among the CSS keywords, darkgray (#a9a9a9) comes closest at 0.027 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #f0eeef
  2. #e1dedf
  3. #d2cecf
  4. #c4bebf
  5. #b5aeb0
  6. #a6a09b
  7. #827c7d
  8. #5f5a5b
  9. #3e3b3c
  10. #201e1e
  11. #060505

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. #a6a09b
  2. #251a2b
  3. #eeae63
  4. #006864
  5. #e7d9f7

Locked as the first of five swatches, stone-400 gets #251a2b, #eeae63, #006864, #e7d9f7 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-400

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

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

Common questions

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

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

Is Tailwind stone-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-stone-400: oklch(70.9% 0.01 56.259); #a6a09b is its conversion to sRGB.

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

No. The nearest CSS named color is darkgray (#a9a9a9), 0.027 away in OKLab.

Sources