RecolorOpen Recolor

A medium bluish gray, black text passes AA

Tailwind gray-400

In Tailwind CSS 4.3.3, gray-400 is defined as oklch(70.7% 0.022 261.325); in hex that is #99a1af, or rgb(153 161 175). Black text on it reaches 8.07:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#99a1afgray-400
From the theme file of Tailwind CSS 4.3.3 (--color-gray-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.7% 0.022 261.325)
Hex#99a1af
RGBrgb(153 161 175)
HSLhsl(218 12% 64%)
CSS variablevar(--color-gray-400)
Nearest CSS namedarkgray #a9a9a9, 0.036 away in OKLab
White text2.60:1: AA fails, AAA fails, large text fails
Black text8.07:1: AA passes, AAA passes, large text passes

About gray-400

In OKLCH, gray-400 has a lightness of 70.7%, a chroma of 0.022 and a hue of 261.3 degrees, which makes it a medium bluish gray. The step up to gray-300 is 16.5 points of lightness, and the step down to gray-500 15.6 points.

HSL calls its lightness 64%, OKLCH 70.7%: 6 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so gray-400 converts to #99a1af without losing chroma.

For text, gray-400 wants black: 8.07:1 clears even AAA's 7:1, and white at 2.60:1 fails AA. It is the darkest gray shade that still carries black body text; gray-500 drops to 4.34:1.

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

Tints and shades

  1. #edeff1
  2. #dcdfe4
  3. #cbcfd6
  4. #babfc9
  5. #a9b0bc
  6. #99a1af
  7. #777d88
  8. #575b64
  9. #383c41
  10. #1c1e22
  11. #050507

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. #99a1af
  2. #764b34
  3. #b8edff
  4. #011d28
  5. #d5ac97

Locked as the first of five swatches, gray-400 gets #764b34, #b8edff, #011d28, #d5ac97 from Recolor's generator, a complementary palette, built on the hue opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using gray-400

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

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

Common questions

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

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

Is Tailwind gray-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-gray-400: oklch(70.7% 0.022 261.325); #99a1af is its conversion to sRGB.

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

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

Sources