RecolorOpen Recolor

A medium bluish gray, black text passes AA

Tailwind zinc-400

The hex code of Tailwind zinc-400 is #9f9fa9 (rgb(159 159 169)), from its Tailwind CSS 4.3.3 value oklch(70.5% 0.015 286.067). Black text on it reaches 8.01:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#9f9fa9zinc-400
From the theme file of Tailwind CSS 4.3.3 (--color-zinc-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.5% 0.015 286.067)
Hex#9f9fa9
RGBrgb(159 159 169)
HSLhsl(240 5% 64%)
CSS variablevar(--color-zinc-400)
Nearest CSS namedarkgray #a9a9a9, 0.033 away in OKLab
White text2.62:1: AA fails, AAA fails, large text fails
Black text8.01:1: AA passes, AAA passes, large text passes

About zinc-400

Read as numbers, zinc-400 is lightness 70.5%, chroma 0.015 and hue 286.1 degrees; read by eye, it is a medium bluish gray. Its neighbors on the zinc scale are zinc-300, 16.6 points lighter, and zinc-500, 15.3 points darker.

Its lightness is 64% in HSL and 70.5% in OKLCH, 6 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(70.5% 0.015 286.067) sits inside sRGB and #9f9fa9 matches it.

Black on zinc-400 reads at 8.01:1, enough for AAA body text; white reaches 2.62:1 and should stay off it. Black text holds AA down to here on the zinc scale; at zinc-500 it falls to 4.35:1.

Of the named colors, darkgray (#a9a9a9) is the nearest, 0.033 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #f0eeef
  2. #e1ddde
  3. #d3cdce
  4. #c5bcbe
  5. #b6acaf
  6. #9f9fa9
  7. #837a7c
  8. #60595b
  9. #3f3a3b
  10. #201d1e
  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. #9f9fa9
  2. #0d4e8c
  3. #f2e399
  4. #002847
  5. #c3adcf

Around zinc-400 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #0d4e8c, #f2e399, #002847, #c3adcf, drawn from a seed fixed by its hex. Open it in Recolor.

Using zinc-400

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

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

Common questions

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

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

Is Tailwind zinc-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-zinc-400: oklch(70.5% 0.015 286.067); #9f9fa9 is its conversion to sRGB.

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

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

Sources